배경 이미지 (HTML, 부트 스트랩, CSS)

위에 이미지를 배치 할 수 없으므로 div의 요소 (?)를 "고급"으로 배치하는 것과 관련하여 문제가 있습니다. 나는 다른 사람들에게 물체를 집중시키는 법을 정말로 모르겠습니다. 나는 여러 가지 방법을 사용하여이 시도를 해왔다. 여기에서 응답을 읽고 모든 튜토리얼을 살펴 보았지만 나는 이해하지 못하고있다. :/배경 이미지 (HTML, 부트 스트랩, CSS)

다른 이미지 위에 이미지를 가운데에 배치하고 오버레이하려는 최근의 시도입니다. 이 작업을 완료에서

<body> 

<div class="container-fluid"> 
    <img class="img-responsive" src="file:///E:/HTML_CODE/HexStars.png" alt="HexStars" style="position:relative;"> 
    <div class="row"> 
     <div class="col-sm-4"></div> 
     <div class="col-sm-4"><img class="img-responsive" src="file:///E:/HTML_CODE/HexLogo.png" alt="HexStars"></div> 
     <div class="col-sm-4"></div> 
    </div> 
</div> 

</body>

내 초기 생각은 단지 배경 이미지를 사용하고 있었고, 난 그것이 바로 그것을 고려하여 배경 이미지를 무시 상상으로 다른 위에 하나를 오버레이로 번거 로움하지 않아도 배경.

내 시도가 실패한 후 나는 img이 '배경'이미지를 상대로 설정하고 후자를 절대적으로 운이없는 절대 설정으로 사용할 것을 시도했다.

9 회 중 9 번 오버레이를 시도하는 사진이 바로 아래 사진에 앉아서 차가워 지려고합니다.

죄송합니다. 누군가가 마술처럼 픽셀 좌표를 아는 방법을 모르는 상태에서 이미지를 재 배열하는 방법을 설명하고 스냅으로 img 맵을 레이아웃 할 수 있기를 바랍니다.

어쨌든 난 잠을 못 자고 아마 어쩔 줄 몰라. 미리 감사드립니다.

편집 :

왜이 기능이 작동하지 않습니까 ????

body { 
     background-color: #1a1a1a; 
     background-image: file:///E:/HTML_CODE/HexStars.png("HexStars"); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
    }

임 그래서 바보, 나는 CSS 배경 이미지를 사용하지만 메신저는 여전히 내 질문의 상반부에 혼란스러워하는 방법을 알아 냈어. 내 시도가 실패한 후

출처

2016-09-21 Mike Remley

전체 HTML 및 CSS 파일을 게시하십시오. – Stormhashe

난 그냥 모두 IMG의 상대와 '배경'이미지와이 중 행운과 절대적으로 후자 설정 에 대한 유체 컨테이너를 사용했습니다.

다른 방법으로 시도해보십시오. position: absolute은 DOM의 흐름에서 이미지를 가져와 다른 요소를 그 위에 놓을 수 있습니다. 백그라운드의 img 컨테이너에 position:absolute을 넣고 이미지 위에 position:relative을 넣고 싶습니다.

왜이 작동하지 ????

본문 { background-color : # 1a1a1a; background-image : file : /// E : /HTML_CODE/HexStars.png ("HexStars"); background-repeat : no-repeat; background-attachment : fixed; }

배경 이미지 값의 형식이 올바르게 표시되지 않습니다.그것은이 같은 더 보일 것이다 : background-image: url("paper.gif"); 또는이 같은 제공된 예제 제공 : background-image: url("file:///E:/HTML_CODE/HexStars.png");

출처

2016-09-21 20:23:48

하 게시 후 바로 내 실수를 깨달았습니다. 그러나 나는 그 위치 설정을 시도 할 것이다. 도와 주셔서 감사합니다 :) –

이

HTML과 같은

사용 무언가 :

<div class="image img img-responsive img-thumbnail full-width"> 
    <img src="......" alt /> 
</div>

CSS :

.image{ 
    position:relative; 
    overflow:hidden; 
    padding-bottom:100%; 
    width: 100%; 
} 
.image img{ 
    position:absolute; 
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%); 
}

을 그러면 이미지가 세로로 가운데에 표시됩니다. 만약 당신이 그것을 수평으로 놓기를 원한다면 translateX (-50 %)와 left : 50 %;

출처

2016-09-21 20:29:18 tsanchev

아! 오버플로, 그게 내가 무엇을 찾고 있었는지! 나는 나머지를 확실히하려고 노력할 것이다. 당신의 도움을 주셔서 감사합니다 :) –

배경 이미지 (HTML, 부트 스트랩, CSS)

답변

관련 문제