画像の上の位置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; 

これはすべてのデバイスに必要なようです。しかし、今私は画像の特定の部分に収まるクリック可能なdivでimage-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でdivdivの内側を使用しますが、その後は%秒、ないpxまたは絶対値を使用して、好きな場所のdiv内に配置することができます。

#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

それは含むdiv要素の割合でオフセットbackground-position、background-sizeとの組み合わせです。

background-positionを特定の値に保ち、画像上のスポットが常に画面に表示されるようにします。
background-size: cover;またはbackground-size: contain;を使用すると、イメージ（またはそのコンテナ）が応答しやすくなります。
画像の外側の端に2つ以上のスポットがある場合は、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