如何设置背景图片尺寸为前景图片的80%

因为CSS无法直接获取子元素（前景图片）的尺寸，所以需要结合JS或者调整HTML结构来实现需求，以下是两种可行方案：

方案一：JS + CSS 变量（动态匹配） #

通过JS获取前景图片的宽高，计算出80%的尺寸后存入CSS变量，再在CSS中使用这些变量设置背景图大小，能实现完全动态的匹配：

步骤1：修改CSS #

替换原有背景属性，使用CSS变量定义尺寸：

.field-content.main-hero {
    background: url(/themes/custom/mytheme/assets/images/white-pink-background.png) no-repeat left top / var(--bg-width) var(--bg-height) !important;
    padding-left: 2em;
    padding-top: 2em;
    background-attachment: scroll !important;
    position: relative; /* 保证背景定位基准正确 */
}

步骤2：添加JS代码 #

监听图片加载和窗口 resize 事件，动态更新CSS变量：

const heroContainer = document.querySelector('.field-content.main-hero');
const foregroundImg = heroContainer.querySelector('img');

// 图片加载完成后获取尺寸
foregroundImg.addEventListener('load', updateBgSize);
// 窗口缩放时重新计算
window.addEventListener('resize', updateBgSize);

function updateBgSize() {
  const imgWidth = foregroundImg.offsetWidth;
  const imgHeight = foregroundImg.offsetHeight;
  heroContainer.style.setProperty('--bg-width', `${imgWidth * 0.8}px`);
  heroContainer.style.setProperty('--bg-height', `${imgHeight * 0.8}px`);
}

方案二：调整HTML结构（纯CSS实现，依赖布局） #

如果不想用JS，可以通过嵌套元素模拟背景，将其尺寸设为前景图的80%：

步骤1：修改HTML结构 #

在容器内添加一个专门的背景元素：

<div class="field-content main-hero">
  <div class="hero-bg"></div>
  <img src="你的前景图片地址" alt="前景图描述">
</div>

步骤2：编写CSS #

通过绝对定位将背景元素放在前景图下方，并设置尺寸为80%：

.field-content.main-hero {
    position: relative;
    padding-left: 2em;
    padding-top: 2em;
}

.hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 80%;
    height: 80%;
    background: url(/themes/custom/mytheme/assets/images/white-pink-background.png) no-repeat left/contain;
    z-index: -1; /* 让背景在前景图下方 */
}

.field-content.main-hero img {
    position: relative;
    z-index: 1; /* 确保前景图显示在上方 */
}

注意：该方案要求容器尺寸与前景图片尺寸一致，否则背景的80%会基于容器而非前景图计算。

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