为何同时设置html和body的RGBA背景色会出现两种颜色？
2026-7-14
为什么同时设置html和body的半透明背景会出现两种不同颜色？
我为html和body元素都设置了background-color: rgb(35, 39, 47, 0.78);的背景色，但预览网页时却出现了两种不同的颜色，这是为什么？
我的源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>RGBA</title> <style> * { padding: 0; margin: 0; } body { height: 500px; } html, body { background-color: rgb(35, 39, 47, 0.78); } </style> </head> <body></body> </html>
预览效果显示页面有两种深浅不同的同色系颜色，当我仅设置body元素的背景色时，网页只显示一种颜色。我猜测是不是两种颜色叠加形成了body元素的实际背景色，是这样吗？
你的猜测完全正确，核心原因是html和body元素的背景渲染规则特殊：
- 浏览器会把
html元素的背景色作为整个视口的背景； - 而
body元素的半透明背景会直接叠加在html的背景之上，相当于在同一个底色上又盖了一层半透明的同色层，这就导致body区域的颜色看起来比视口其他区域更深； - 当你只设置body的背景色时，浏览器会自动把body的背景色“提升”为视口背景，此时只有一层颜色，所以显示统一。
如果想要页面背景统一，可以采取以下两种方案：
- 只给
html元素设置背景色，body设为透明：
html { background-color: rgb(35, 39, 47, 0.78); } body { height: 500px; background-color: transparent; }
- 给html设置不透明底色，body单独设置半透明背景：
html { background-color: #23272f; /* 对应rgb(35,39,47)的不透明色值 */ } body { height: 500px; background-color: rgba(35, 39, 47, 0.78); }
内容的提问来源于stack exchange，提问作者Ricky W. Chew
相关产品推荐
相关产品推荐
