前段时间改个人静态网页的时候，卡了好久网页背景颜色怎么设置，试了好几种写法，要么底色没变化，要么只改了局部区域，特别折腾人。
最开始傻傻的只给body标签加颜色代码，随便抄了一段网上的片段，保存刷新之后页面依旧是默认的白色，完全没效果。当时以为是色值代码写错了，来回换了十多个十六进制色号，从纯白、浅灰到淡蓝挨个试，页面底色始终纹丝不动，压根找不到问题出在哪。
后来才反应过来，是页面外层div容器覆盖了body的背景样式，导致基础设置直接失效。
网页背景颜色怎么设置（基础全局设置）
正常情况下，想要统一整个网页的背景颜色，直接在CSS里给body标签设置background-color属性就够用，这是适配绝大多数静态网页、简单前端页面的基础写法。实操的时候只用打开网页对应的CSS样式文件，或者在html文件的style标签内写入代码，输入对应的色值就能生效。常用的色值有三种形式，十六进制、RGB、标准颜色英文单词，日常开发用十六进制是最多的，兼容性和精准度都更好。
最简单的全局设置代码，直接复制就能用：body{background-color:f5f5f5;}，这个色号是浅灰色，不刺眼，适配所有浏览器。写完代码保存文件，刷新网页就能立刻看到背景颜色改变，没有延迟。
网页背景颜色怎么设置（解决覆盖失效问题）
之前踩的最大的坑，就是忽略了页面容器的层级覆盖。很多网页都会用wrap、container这类外层大div包裹所有内容，这类容器默认会继承白色底色，并且层级高于body，就算body设置了背景色，也会被完全遮挡，肉眼看不到任何变化。
折腾好久才搞明白，这种情况不能只改body样式，必须同时清空外层容器的默认背景，或者直接给外层div设置背景颜色。可以把外层容器的background-color属性和body设置为同一个色值，也可以直接取消容器的背景填充，让body的底色正常显示出来。
还有个小众坑点，部分老旧浏览器会默认自带页面边距和默认样式，导致背景色边缘出现留白。解决方式也很简单，在设置背景色的同时，给body加上margin:0;的样式，清空默认边距，让背景色铺满整个页面。
网页背景颜色怎么设置（局部区域设置）
不是所有人都需要全局改色，很多时候只需要给网页的头部、侧边栏、底部栏单独设置背景颜色。这种情况不用动body的样式，直接选中对应模块的标签，给其单独添加background-color属性即可，不会影响网页其他区域的样式。
局部设置的优势很明显，精准控制、互不干扰，适合做网页分区配色、模块区分，是网页美化里最常用的操作之一。
实操没有复杂门槛。
最后调试完页面，盯着浏览器干净的浅灰色背景，关掉了反反复复修改了几十次的代码文件。