div设置background-image背景图片不显示的解决方法

核心错误点 #

你的代码里存在3个直接/间接导致背景图加载异常的问题：

• 最直接的语法错误：.scifibg的width属性值1280未加单位。CSS规范中除0外所有长度值必须指定单位（如px/rem等），无单位的长度值属于无效声明，浏览器会直接忽略该属性，引发布局异常。
• 定位逻辑隐患：内部.scifititle元素设置了position: absolute脱离普通文档流，父元素.scifibg未设置定位上下文，容易出现子元素溢出、渲染层级错位的问题。
• 缺失背景适配规则：未指定背景图的重复方式、定位、尺寸规则时，浏览器会按默认规则（原图尺寸、左上角对齐、双向重复）渲染，如果图片本身尺寸和容器实际尺寸不匹配，容易出现显示错位、视觉上像未加载的情况。
• 路径匹配风险：background-image的url路径是相对于CSS文件所在位置解析的（如果是写在HTML内联样式里则相对于HTML文件位置），如果路径层级写错会直接返回404，图片无法加载。

修正后可直接运行的代码 #

CSS代码 #

.scifititle {
  width: 50%;
  position: absolute;
  top: 1080px;
  left: 350px;
}

.scifibg {
  /* 请根据CSS文件实际存放位置确认图片路径是否正确 */
  background-image: url(images/stars.gif);
  /* 补全宽度单位，和设计稿尺寸匹配 */
  width: 1280px;
  height: 276px;
  margin-top: 1200px;
  /* 给父元素加相对定位，作为内部绝对定位元素的参照上下文 */
  position: relative;
  /* 背景图适配规则，可根据需求调整 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

HTML代码 #

<div class="scifibg">
    <img class="scifititle" src="images/sci-fi-title.png" alt="科幻标题">
</div>

后续排查步骤 #

如果修正后依然无法显示，按以下顺序排查：

1. 打开浏览器开发者工具（F12），切换到Network面板筛选Img类型请求，找到stars.gif看请求状态：如果是404说明路径写错，调整url层级即可；如果是200说明图片加载成功，检查是否有其他样式覆盖了背景属性。
2. 检查图片文件名是否有大小写错误（部署到Linux服务器时文件名大小写敏感，Stars.gif和stars.gif会被识别为两个不同文件）。
3. 检查父级元素是否设置了overflow: hidden，或者有其他定位元素层级高于当前容器遮挡了背景。

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