使用live server时CSS linear-gradient叠加背景图仅显示灰色如何解决？

排查&修复步骤 #

• 优先校验图片路径匹配规则
  你当前CSS中使用url(123.jpg)的相对路径写法，要求123.jpg必须和style.css文件处于同一级目录。如果文件存放结构不符，需要对应调整路径：
  • 图片存放在独立img文件夹、CSS和HTML同级：路径改为url(img/123.jpg)
  • CSS存放在独立css文件夹、图片和HTML同级：路径改为url(../123.jpg)
    同时注意文件名大小写完全匹配，部分系统对文件名大小写敏感，123.JPG和123.jpg会被识别为两个不同文件。
• 补充基础布局样式，解决兼容问题
  在CSS文件开头添加html、body的宽高设置，同时给.hero补充定位偏移值，确保元素铺满视口：

/* 新增基础样式 */
html, body {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.hero {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(123.jpg);
  background-position: center;
  background-size: cover;
  position: absolute;
  /* 新增定位偏移 */
  top: 0;
  left: 0;
}

• 校验图片文件本身有效性
  直接在Live Server启动的地址后拼接图片名访问，确认图片没有损坏、格式为浏览器支持的类型。
• 检查样式覆盖问题
  打开浏览器F12开发者工具，选中.hero元素，查看计算后的样式表，确认background-image属性没有被更高优先级的样式覆盖。

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