CSS中background-image设置的背景图片无法加载怎么办

HTML中能正常引用图片但CSS背景图不生效是高频新手问题，按以下顺序排查即可解决：

• 先搞清楚路径计算规则：CSS里url()的相对路径，是相对于当前CSS文件的存储位置计算的，和HTML文件在哪没关系。你在HTML里写img标签能正常显示图片，是因为img的路径以HTML文件位置为基准，两者计算逻辑完全不一样。
  对着你的项目文件夹结构核对路径：如果写样式的CSS文件是放在单独的css子文件夹里的外部样式表，../images/Shadex1.png的意思是从CSS文件所在位置往上跳一级，再进images文件夹找图；如果你的CSS是直接写在HTML的<style>标签里的，那写../images/就会跑到HTML文件的上一级目录找图，路径自然错了，这时候改成images/Shadex1.png才对。
• 打开浏览器按F12调出开发者工具，做两个核心检查：
  1. 用元素选择器选中class为nav的节点，看「计算样式」面板：
     • 确认元素实际渲染的宽高不是0，有没有其他优先级更高的样式把你写的height: 50px、width: 100%覆盖了——如果元素实际高度是0，背景图加载了也看不见
     • 确认background-image属性值确实是你设置的图片地址，没有被后续样式覆盖。要注意：如果后面给.nav写过background: #xxx这类背景简写属性，会直接把之前设置的background-image重置为none，直接导致背景图失效
  2. 切到「网络」面板，筛选图片类型资源，刷新页面看Shadex1.png的请求状态：
     • 状态码404：百分百是路径写错了，重新数清楚CSS文件和图片文件之间的层级就行，尤其注意文件名大小写——Linux服务器对大小写敏感，Shadex1.png和shadex1.png会被识别为完全不同的文件，本地Windows测试没问题不代表部署后也正常
     • 状态码403：是服务器静态资源的访问权限配置问题，调整图片目录的访问规则即可
     • 状态码200但看不到图：检查是不是设置了和图片冲突的背景色、或者图片被导航栏里的其他子元素挡住了
• 快速定位路径问题的小方法：把url()里的路径改成站点根目录开头的绝对路径，也就是写为url("/images/Shadex1.png")（开头的斜杠代表站点根目录），如果改完立刻能显示，就完全可以确定是之前的相对路径层级算错了。

你贴出来的CSS里background-repeat: repeat-x、定位相关的属性写法都没有语法问题，不用在这几个属性上浪费时间排查。

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