이미지 상단에 위치 div

Question

좋아, 그래서 배경 이미지가있는 다른 div 위에 위치 시키려고합니다. image-div에는 다음과 같은 속성이 있습니다.

position: absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background-image: url('../img/1.jpg'); 
background-size: contain; 
background-repeat: no-repeat; 
background-position: center center; 

이것은 모든 기기에서 원하는 것처럼 보입니다. 하지만 이제는 image-div를 이미지의 특정 부분에 맞는 클릭 가능한 div로 오버레이해야합니다. div를 맞추는 것은 쉽고, 위치를 절대로 설정하고 위쪽, 왼쪽, 너비 및 높이를 설정합니다. 그러나 다른 해상도/밀도로 표시하자마자 div가 꺼져 있습니다. 놀랍지도 않습니다. 그래서 % 또는 vh 및 vw 사용하여 위치 지정 시도했지만 아무것도 작동하는 것.

기기, 해상도 및 밀도에 상관없이 이미지 위에 div를 배치하는 방법은 무엇입니까?

Answer 1

<style type="text/css"> 
    #div_1 
     { 
      position:relative; 
      top:0; 
      left:0; 
      width:100%; 
      height:200px; 
      background-image: url('../img/1.jpg'); 
      background-size: contain; 
      background-repeat: no-repeat; 
      background-position: center center; 
     } 
    #div_2 
     { 
      position:absolute; 
      width:50%; 
      height:60%; 
      margin:0px auto; 
     } 
    </style> 
    <div id="div_1"> 
     <div id="div_2"> 
      testing... 
     </div> 
    </div> 

Answer 2

당신은 background-image와 div의 내부 div를 사용할 수 있지만 다음 %의하지 px 또는 절대 값을 사용하여 원하는 목적지 사업부 내에 위치.

#bg{ 
 
position: relative; 
 
width:100vw; 
 
height:100vh; 
 
background-image: url('/favicon.ico'); 
 
background-size: contain; 
 
background-repeat: no-repeat; 
 
background-position: center center; 
 
    z-index: 5 
 
    } 
 
#overlay { 
 
    position: absolute; 
 
    height: 40%; 
 
    width: 30%; 
 
    z-index: 10; 
 
    top: 13%; 
 
    left: 34% 
 
} 
 
#overlay:hover { 
 
    background-color: rgba(50,50,200,0.5); 
 
}

<div id="bg"> 
 
    <div id="overlay"></div> 
 
</div>

Answer 3

그것은 background-position, background-size의 조합이다하고는 DIV 함유 비율의 오프셋.

background-position을 특정 값으로 유지하면 이미지의 위치가 항상 화면에 표시됩니다.
background-size: cover; 또는 background-size: contain;을 사용하면 이미지 (또는 컨테이너)가 반응하도록 유지할 수 있습니다.
이미지의 바깥 쪽 가장자리에 두 개 이상의 스폿이있는 경우 contain을 사용하는 것이 좋지만이 방법을 사용하면 내부 div가 상당히 크게 유지되는 동안 작은 화면에서 이미지 크기가 크게 줄어 듭니다.
다른 경우에는 크기를 조정하려면 cover을 사용하십시오.

가 여기에 내가 예를 만들어 :

$(function() { 
 
    $("#resizable").resizable(); 
 
    });

.container { 
 
    background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop='); 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
    height: 500px; 
 
    position: relative; 
 
    width: 800px; 
 
} 
 
.hit-me-container { 
 
    height: 16px; 
 
    left: 52%; 
 
    position: absolute; 
 
    top: 45%; 
 
    width: 16px; 
 
} 
 
.hit-me { 
 
    animation: pulse 1s ease infinite; 
 
    background-color: #fff; 
 
    border: 3px solid #777; 
 
    box-sizing: border-box; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.hit-me-container:hover:after { 
 
    background-color: #333; 
 
    color: #fff; 
 
    content: 'Buy these glasses'; 
 
    display: block; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
    left: 20px; 
 
    padding: 5px; 
 
    position: absolute; 
 
    width: 100px; 
 
    top: -4px; 
 
} 
 

 
@keyframes pulse { 
 
    0% { transform: scale(1); } 
 
    50% { transform: scale(1.1); } 
 
    100% { transform: scale(1); } 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="container" id="resizable"> 
 
    <div class="hit-me-container"> 
 
    <div class="hit-me"></div> 
 
    </div> 
 
</div>

또는 친절이 fiddle