学习Bootstrap时background-image无法显示问题求助

嘿，我一眼就发现问题所在啦！你写的background-image: url(../img/home.jpg) no-repeat;犯了一个很容易踩的小语法坑——background-image属性只能用来指定图片路径，不能把no-repeat这种背景重复规则写在里面！浏览器会因为这个错误的属性值直接忽略整个background-image声明，这就是为啥你悬停路径能看到图片，但页面上死活不显示的原因。

给你两种修正方案，选哪种都可以：

方案1：拆分独立属性写法 #

把背景相关的属性分开写，逻辑更清晰：

#home-section {
  background-image: url(../img/home.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 700px;
}

方案2：使用复合background属性（更简洁） #

如果喜欢精简代码，可以用background复合属性把路径和重复规则写在一起：

#home-section {
  background: url(../img/home.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 700px;
}

甚至可以把所有背景属性整合到一行（注意顺序，background-size要放在/后面）：

#home-section {
  background: url(../img/home.jpg) no-repeat center center / cover fixed;
  min-height: 700px;
}

额外排查建议 #

如果改完语法还是没效果，再试试这些步骤：

• 打开浏览器控制台的「Network」面板，看看图片请求是不是返回了404（有时候本地文件路径和服务器访问路径会有细微差异，比如大小写、目录层级）；
• 暂时禁用浏览器的所有扩展，或者用隐身模式打开页面，排除插件拦截静态资源的可能；
• 确认#home-section元素确实有足够的高度（你已经设置了min-height:700px，这条大概率没问题，但可以检查元素是否被其他样式覆盖）。

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