我正在开发一个具有响应背景图像的网站，其中背景图像的大小设置为覆盖。
我还有一个链接，上面有一个悬停动画，它是用顶部和左侧的参数定位在背景图像上的。现在我的问题是，当调整屏幕大小时，我还应该重新计算顶部和左侧的参数，以正确显示我的动画。
动画应该显示在背景图像的特定位置。以1920x1240的分辨率观看时，动画的位置正确。但是当调整屏幕大小时，由于图像被缩放，位置不再正确。
有没有办法让顶部和左侧的参数与刻度保持同步？我该如何做到这一点？
目前我的背景图像有这个css：
div.custom-background {
background: url('../../assets/resized/de-sneeuwkoningin-xxl.jpg') no-repeat;
bottom: 0;
left: 0;
right: 0;
top: 0;
background-position: center top;
z-index: -1;
background-size: cover;
}
对于我的动画，我有以下css：
.start {
background: url('../../assets/de maanvallei_beeldmerk_boek.png') no-repeat;
background-size: 100%;
width: 130px;
height: 122px;
top: 45%;
left: 7%;
&:hover {
filter: drop-shadow(10px 10px 10px blue);
transition: filter 0.05s linear;
width: 130px;
height: 122px;
}
}
编辑：
我做了一把小提琴来说明这个问题。调整html视图大小时，前额上的黑点应保持在同一位置。
小提琴：https://jsfiddle.net/3x2njkLu/
我提供了一些可能对您有所帮助的一般技巧，我希望我的数学不会太差您可能需要对其进行调整，完整实施需要一段时间
1.您需要存储图像比例image_ratio = 1920/1240(~1.548(。
2..现在观察缩放时图像的行为-使下一个点因情况而异[现在考虑当前示例视图]
3.1。如果渲染图像尺寸(x或y(=窗口尺寸的100%，则dim_offset = 0
3.2如果渲染图像维度！=100%的窗口尺寸，然后：
a(对于高度：y_offset = window height - window width / image_ratio和新的y:y_adjusted = y + (y_offset) / (height - y_offset)
b(对于宽度：x_offset = window width - window height * image_ratio和新的x:x_adjusted = x (-+) (x_offset) / (width - x_offset)！！(-+(取决于左值-如果y<50%，如果y>50%然后加上，当50%时保持不变x=x
左边的值是x_adjusted，顶部是y_adjusted
现在我建议使用JS来完成这些计算：
document.documentElement.clientWidth和document.documentElement.clientHeightonresize事件-https://www.w3schools.com/jsref/event_onresize.asp- for css：元素的访问样式属性
这篇文章为我指明了正确的方向：无论窗口大小，都保持div覆盖相对于背景图像
我最终解决了纵横比和css的问题。
感谢@Krysztof Nowicki的提示