使用background-size:cover时如何同步计算元素的top与left位置

我正在开发一个带响应式背景图的网站，背景图设置了 background-size: cover。页面上有个带hover动画的链接，通过top和left定位在背景图的特定位置。在1920x1240分辨率下定位正常，但调整屏幕尺寸后，因为背景图被缩放，链接位置就不对了，需要重新计算top和left才能让动画显示在正确位置。

有没有办法让top和left参数和背景图的缩放同步？该怎么实现？

当前代码 #

背景图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视图大小时，需要让额头上的黑点保持在背景图的同一位置。

方法一：纯CSS实现（推荐） #

核心是让动画元素的定位参考系和背景图的缩放逻辑完全对齐，步骤如下：

1. 给背景容器添加position: relative，让内部绝对定位元素以它为参考。
2. 动画元素设置position: absolute，用百分比定义宽高和位置，确保和背景图缩放同步。

修改后的代码：

div.custom-background {
    position: relative; /* 新增：作为定位参考容器 */
    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;
}

.start {
    position: absolute; /* 新增：基于背景容器定位 */
    background: url('../../assets/de maanvallei_beeldmerk_boek.png') no-repeat;
    background-size: 100%;
    /* 按原分辨率比例转百分比，确保大小随背景缩放 */
    width: calc(130px / 1920 * 100%);
    height: calc(122px / 1240 * 100%);
    top: 45%; /* 保留原百分比，基于背景容器的相对位置 */
    left: 7%;

    &:hover {
        filter: drop-shadow(10px 10px 10px blue);
        transition: filter 0.05s linear;
    }
}

这样修改后，动画元素的位置和大小会完全跟随背景图的cover缩放逻辑，不用额外计算。

方法二：JavaScript实时计算位置（备用） #

如果纯CSS方案无法满足特殊需求，可以用JS监听窗口 resize 事件，模拟cover的缩放逻辑来计算位置：

function updateElementPosition() {
    const bgContainer = document.querySelector('.custom-background');
    const startEl = document.querySelector('.start');
    
    // 原背景图的尺寸
    const originalBgWidth = 1920;
    const originalBgHeight = 1240;
    // 目标位置在原图的比例（对应原top45%、left7%）
    const targetXRatio = 0.07;
    const targetYRatio = 0.45;
    // 原动画元素的尺寸
    const originalElWidth = 130;
    const originalElHeight = 122;

    // 获取当前容器尺寸
    const containerWidth = bgContainer.offsetWidth;
    const containerHeight = bgContainer.offsetHeight;

    // 模拟background-size: cover的缩放比例：取宽高比例的较大值
    const scaleRatio = Math.max(containerWidth / originalBgWidth, containerHeight / originalBgHeight);

    // 计算当前元素的位置和大小
    startEl.style.left = `${originalBgWidth * targetXRatio * scaleRatio}px`;
    startEl.style.top = `${originalBgHeight * targetYRatio * scaleRatio}px`;
    startEl.style.width = `${originalElWidth * scaleRatio}px`;
    startEl.style.height = `${originalElHeight * scaleRatio}px`;
}

// 初始化执行一次
updateElementPosition();
// 监听窗口大小变化实时更新
window.addEventListener('resize', updateElementPosition);

内容的提问来源于stack exchange，提问作者Jurgen Vandw