如何在背景图像上粘贴 div？答案

【问题标题】：How to stick a div on a background image?如何在背景图像上粘贴 div？
【发布时间】：2019-11-04 02:48:36
【问题描述】：

我有一个带有背景图片的标题。在这张图片上，我想放置一些圆形的 div 来添加一些动画。问题是一旦视口缩小，如果使用绝对位置，形状会相应移动。我已经尝试使用 vh 和 vw 单位，但即使背景照片不会发生太大变化，形状仍会移动。我只是希望那个 div 在那里，就好像它是照片的一部分一样。这可能吗？

【问题讨论】：

最好把图片上的设计去掉，再去掉几px也没关系
使用一些数学。如果图片尺寸发生变化，则根据这个尺寸扣除位置

标签： css responsive-design css-position

【解决方案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>

【讨论】：