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

它是background-position，background-size的组合，以及包含div的百分比的偏移量。

将background-position保持在特定值，以使图像上的斑点始终显示在屏幕上使用background-size: cover;或background-size: contain;保持图片（或其容器）的响应如果你在图像的外边缘有两个或更多的点，我建议使用contain，但这会在较小的屏幕上大大减小图像尺寸，而你的内部div将保持相当大。
在其他情况下，请使用cover进行调整大小。

这里我创建了一个示例:(我使用Jquery UI来调整图像大小）

＆＃13;

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

＆＃13;

.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); }
}

＆＃13;

<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>

＆＃13;

或者查看此fiddle

Answer 2

    <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 3

您可以在div内使用div background-image，但是然后使用%将其放在div中的任何位置，而不是{{1}绝对值。

＆＃13;

px

＆＃13;

#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);
}

＆＃13;

将div放在图像顶部

3 个答案: