html/body 背景色对浏览器背景色的影响
给 body 提供背景色时，整个浏览器背景色会随之改变，即使 body 的大小不足以填满浏览器视窗。但为 html 设置背景色后，浏览器背景色又会变为 html 的背景色。为何会出现这种现象？
示例：
body { background:#069; /* 绿色 */ margin:100px; border:30px solid #093; /* 橙色边框 */}
在该示例中，只有 body 有背景色，而 html 没有。可以看到，整个浏览器背景是绿色的，因为 body 的背景色占满了整个视窗。
立即学习“前端免费学习笔记（深入）”；
html { background:#999; /* 灰色 */}body { background:#069; /* 绿色 */ margin:100px; border:30px solid #093; /* 橙色边框 */}
然而，当我们为 html 也设置背景色时，浏览器背景色变为灰色（html 的背景色），而不是绿色的 body 背景色。
原因：
根据 w3c 规范：
如果根元素 (html) 的背景图像计算值为 none，且背景色为透明，用户代理必须从该根元素的第一个 body 子元素中传播背景属性的计算值。该 body 元素的背景属性的已用值是其初始值，传播的值如同在根元素上指定。建议 html 文档的作者为 body 元素而不是 html 元素指定画布背景。
这意味着，当 body 的背景透明、图像为 none 时，浏览器会将 body 中的背景属性值传递给根元素 (html)，此时 html 的背景属性值会覆盖根元素的默认值为浏览器背景色。因此，浏览器背景色会变成 html 指定的灰色。
以上就是为什么浏览器背景色会受 body 和 html 背景色的影响？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631021.html
微信扫一扫 
支付宝扫一扫 
