为何删除width:100%后背景图消失？CSS背景图显示问题咨询

嘿，这个问题我做页面的时候也踩过一模一样的坑！核心原因和绝对定位元素的尺寸规则直接相关，给你掰扯清楚：

问题根源 #

当元素设置了position: absolute时，它的宽度默认是收缩包裹自身内容的——如果你的.img_header里没有任何文本、子元素之类的内容，那去掉width:100%之后，这个元素的宽度会直接变成0。背景图是依附在元素盒子上的，盒子都没宽度了，背景图自然就看不见啦！

本质：绝对定位的尺寸计算逻辑 #

绝对定位元素脱离了正常文档流，它的尺寸不会像普通块级元素那样自动撑满父容器。只有当你明确设置了width，或者用left+right（垂直方向对应top+bottom）来约束它的位置时，它才会被强制撑开。

替代解决方案（不用width:100%也能显示背景图） #

如果你不想写width:100%，可以用左右定位让元素自动撑满父容器宽度，代码改成这样：

.img_header{
  position: absolute;
  background-image: url(space.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 替换width:100%的写法 */
  left: 0;
  right: 0;
  z-index: -1;
  height: 400px;
}

这样设置后，浏览器会自动让元素左边贴紧父容器左边缘、右边贴紧右边缘，宽度自然铺满，背景图也能正常显示。

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