如何在使用百分比定位时保持背景图片位置固定

我有一个尺寸可变的div元素，鼠标悬停时会改变尺寸并执行过渡动画。为保证过渡平滑，需要div的背景图片在尺寸变化时不发生位移。

问题在于必须使用百分比来定位背景图片，想请教是否可以保留百分比初始转换后的像素值，使其固定不变，而非随div尺寸缩小而重新计算为新的百分比对应值，以此保证过渡效果平滑。

当前使用的CSS代码：

.expandedcard {
    background-size: auto 90% !important;
    background-position: 90% 110% !important;
}

效果对比：

• 鼠标悬停前：
  
• 鼠标悬停后：
  

核心思路是将初始百分比对应的背景位置像素值固定下来，避免容器尺寸变化时重新计算百分比偏移。可以通过CSS变量结合JavaScript实现，步骤如下：

1. 用CSS变量存储背景位置 #

先给目标元素定义CSS变量，用来后续替换为固定像素值：

.expandedcard {
    --bg-pos-x: 90%;
    --bg-pos-y: 110%;
    background-size: auto 90% !important;
    background-position: var(--bg-pos-x) var(--bg-pos-y) !important;
    transition: all 0.3s ease; /* 保证过渡平滑 */
}

2. 计算并替换为初始像素值 #

在页面加载完成后，通过JavaScript计算初始百分比对应的像素位置，替换CSS变量：

document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.expandedcard');
    cards.forEach(card => {
        const rect = card.getBoundingClientRect();
        // 计算初始百分比对应的像素值
        const posX = rect.width * 0.9;
        const posY = rect.height * 1.1;
        // 更新CSS变量为像素值
        card.style.setProperty('--bg-pos-x', `${posX}px`);
        card.style.setProperty('--bg-pos-y', `${posY}px`);
    });
});

3. 悬停时保持固定定位 #

当给div添加悬停尺寸变化样式时，直接保留background-position的CSS变量设置，此时背景位置会固定为初始计算的像素值，不会随容器尺寸改变：

.expandedcard:hover {
    /* 这里写入你的尺寸变化逻辑，例如： */
    width: 80%;
    height: 80%;
    /* 背景位置沿用已固定的像素变量 */
    background-position: var(--bg-pos-x) var(--bg-pos-y) !important;
}

补充优化说明 #

• 如果背景图片本身有固定尺寸，需要更精准计算的话，要考虑容器与图片的尺寸差：(容器宽度 - 图片显示宽度) * 百分比。可以通过getComputedStyle获取图片的实际显示尺寸来调整计算逻辑。
• 另一种替代方案是用transform: scale()实现尺寸缩放，这种方式不会改变容器的实际占位尺寸，背景百分比定位也不会偏移，但可能不符合你的布局需求。

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