克隆Netflix UI时设置absolute定位后背景图消失求助

核心问题出在.frontPage的宽度设置上：当元素设置position: absolute后，width: auto会让元素因为内部无内容而收缩到宽度为0，背景图自然无法显示。

修复步骤 #

给.frontPage明确设置宽度为父容器的100%，或者使用inset属性简化定位写法：

修正后的CSS代码

*{
    margin: 0;
    padding: 0;
}

.parent-container{
    position: relative;
    height: 120vh;
    width: auto;
}

.frontPage{
    background-image: url('https://picsum.photos/seed/picsum/200/300');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: max(1500px,100%);
    filter: brightness(0.5);
    width: 100%; /* 替换width:auto */
    height: 110vh;
    position: absolute;
    top: 0;
    left: 0;
}

或者更简洁的写法（用inset替代top/left/width/height）：

.frontPage{
    background-image: url('https://picsum.photos/seed/picsum/200/300');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: max(1500px,100%);
    filter: brightness(0.5);
    position: absolute;
    inset: 0; /* 等同于top:0;right:0;bottom:0;left:0 */
    height: 110vh; /* 保留自定义高度 */
}

原理说明 #

静态定位（默认）的元素width: auto会自动填充父容器的可用宽度，但绝对定位元素的width: auto是根据内容宽度计算的——当元素内部没有内容时，宽度会被压缩为0，导致背景图无法被渲染出来。设置width:100%或者inset:0可以让元素铺满父容器的宽度，背景图就能正常显示了。

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