css - 如何在背景图片上粘贴一个div？

Question

我有一个带有背景图片的页眉。在此图像上，我想放置一些带有圆形的 div 以添加一些动画。问题在于，一旦视口(viewport)缩小，如果使用绝对位置，形状将相应移动。我已经用 vh 和 vw 单位试过了，但即使背景照片不会改变太多，形状仍会移动。我只希望那个 div 在那里，就好像它是照片的一部分一样。这可能吗？

Answer 1

对于圆形(或完美的正方形)，您可以使用非常巧妙的 hack。在 :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>