Question

我有一些我不知道的问题。所以我有一个带有背景图像的div。

<div class="a"></div>

，我想使此背景图片的某些点可点击。可以，我可以通过添加一些div宽度的z-index并使其可单击并将其定位在position：absolute e.g，

<div class="b">
<a class="clickablePoint" href="#"></a>
</div>

但是，如果我的背景图像必须是自适应的，那么我如何在调整窗口大小时以相同的方式保持此可点击的点，因此background-size：100％自动。

也许有一些方法可以在调整窗口大小时实时计算背景图像的高度？或其他任何方法？ :(

Answer 1

这是一个最小可行的解决方案，显示了如何基于全角（background-size: 100% auto）背景绝对定位元素。

我将元素的font-size设置为1vw（视口宽度的1/100），然后计算其在{{1中的左/上位置和宽度/高度大小}}单位，等于em的倍数。

因此，将此演示文稿调整为任意大小将使该框保持在猫鼻子周围的同一位置。

1vw

body {
  background: url('https://i.imgur.com/sVz3YRx.jpg');
  background-size: 100% auto;
  height: 50vw; /* for stack snippet height */
  position: relative;
  margin: 0;
}

.nose {
  border: 1px solid yellow; /* for demo */
  position: absolute;
  font-size: 1vw;
  top: 27em;
  left: 59em;
  width: 6em;
  height: 5em;
}

如何在调整大小窗口上计算div背景图像大小

1 个答案: