CSS body背景色本地显示正常，线上网页不生效的原因分析

原正常样式 #

body {
    font: 18px Helvetica, sans-serif, Arial;
    color: #ffffff;
    background: url("../images/bg.jpg") center top repeat-x;
    background-size: cover;
    line-height: 20px;
}

修改后异常样式（本地正常，网页端背景变白） #

body {
    font: 18px Helvetica, sans-serif, Arial;
    color: #ffffff;
    background-color: #00008B;
    background-size: cover;
    line-height: 20px;
}

出现本地与网页端显示差异，主要是这几个原因：

• 浏览器缓存未更新：网页端浏览器可能缓存了旧的CSS文件，没加载你修改后的版本。解决办法：按Ctrl+F5强制刷新页面，或者给CSS文件名加版本后缀（比如styles.css?v=2），强制浏览器重新请求新文件。

• CSS样式被覆盖：网页端存在优先级更高的CSS规则，覆盖了body的background-color。排查方式：用浏览器开发者工具（按F12）选中body元素，查看右侧样式面板，看background-color是否被划掉，找到覆盖它的规则（比如父容器样式、全局样式或内联样式），调整优先级或者修改冲突规则。

• 文件部署错误：修改后的styles.css没正确上传到服务器，或者上传路径有误，导致网页端仍加载旧文件。排查方式：直接在浏览器地址栏输入CSS文件的URL，查看内容是否为修改后的版本；或者检查服务器上的文件路径和内容。

• 极小概率的拼写问题：虽然本地显示正常，仍可确认#00008B有没有拼写错误（比如少写字符、大小写错误），不过这个可能性极低。

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