如何在背景图片上粘贴div？

Question

我有一个带有背景图像的标题。在此图像上，我想放置一些带有圆形的div以添加一些动画。问题在于，一旦视口缩小，如果使用绝对位置，则形状将相应地移动。我已经用vh和vw单位进行了尝试，但是即使背景照片变化不大，形状仍然会移动。我只希望该div出现在其中，就好像它是照片的一部分一样。这可能吗？

Answer 1

您可以为圆圈（或完美的正方形）做一个漂亮的整洁的技巧。在:after伪类中，您可以说padding-bottom：100％-此百分比相对于.circle本身，因此宽度和高度完全相同。加上圆圈宽度的一个百分比，您可以使用容器调整这些大小。

您会注意到，调整容器的大小会保持相对于父对象的圆的大小以及相对于父对象的位置的大小。

.header {
  position: relative;
  height: 300px;
  background: grey;
}

.circle {
  width: 10%;
  position: absolute;
}

.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  border: 1px solid green;
  border-radius: 100%;
  overflow: hidden;
}

.circle.top-left {
  left: 10%;
  top: 10%;
}

.circle.bottom-right {
  right: 10%;
  bottom: 10%;
}

<div class="header">
  <div class="circle top-left"></div>
  <div class="circle bottom-right"></div>
</div>