如何设置背景颜色
background-color 用一种颜色填充元素的盒子，包括内边距和边框下方的区域。它接受任何 CSS 颜色。
页面的颜色设置在 body 上，卡片和提示框的颜色设置在各自的 div 上，高亮则设置在一个行内元素上。行内元素只在文字后面逐行显示背景。
整个页面的背景颜色
把 background-color 写在 body 上。如果 <html> 元素自己没有背景，浏览器会把 body 的背景绘制到整个窗口，即使 body 的内容已经结束的地方也会被填满：
body {
background-color: #111827;
color: #f9fafb; /* change the text color too, for contrast */
}
旧的 HTML 写法是 <body bgcolor="black">。bgcolor 属性在所有元素上都已经过时，所以请改用 CSS。浏览器为了兼容老页面仍然支持它，这就是为什么它看起来还能用。
透明背景
每个元素一开始都是 background-color: transparent，所以你能看到它后面的父元素。如果想给盒子染上一层颜色，同时还能透过它看到后面的内容，就使用带 alpha 通道的颜色：
opacity: 0.5 也能让条纹透出来，但它会让文字也一起变淡。如果想要半透明的背景和不透明的文字，就用带 alpha 的颜色。颜色页面列出了所有写法。
颜色画到哪里
默认情况下，背景会延伸到边框的外边缘（所以在虚线边框或半透明边框下面能看到背景）。background-clip 可以改变这一点：
在第一个盒子中，琥珀色会出现在虚线之间。在第二个盒子中，它止于边框的内边缘；而在第三个盒子中，只有内容区域被着色。外边距永远不会被绘制：它始终是透明的。
斑马纹表格行
给每隔一行加上背景，能让宽表格更容易浏览：
background-color 与 background 简写
background 一次设置所有背景属性。你没写出来的部分都会恢复为默认值，这一点经常让人中招：
.hero {
background-image: linear-gradient(#2563eb, #1e40af);
background: #111827; /* also resets background-image to none */
}
.hero {
background-image: linear-gradient(#2563eb, #1e40af);
background-color: #111827; /* only the color; the gradient stays */
}
只想设置颜色时，用 background-color。在一个地方设置整个背景时（通常是颜色加图片），用 background；见 background-image。
无障碍：和文字颜色一起考虑
背景颜色只有搭配合适的文字颜色才能看清。每次设置其中一个，都要检查另一个：WCAG 要求正文文字的对比度至少为 4.5:1。深色背景需要显式设置浅色文字，因为文字会保留它继承来的深色。
常见错误
- 使用
bgcolor。 它已经过时，请使用background-color。 - 用
opacity做半透明背景。 它会让内容也变淡。请使用带 alpha 的颜色。 - 在
background-image之后写background简写。 它会重置图片。请改写成background-color。 - 以为外边距会显示颜色。 外边距在背景之外。需要有颜色的空白时，请使用内边距。
- 深色背景配默认文字颜色。 同时设置一个浅色的
color。
常见问题
HTML 中怎么修改背景颜色？
使用 CSS 的 background-color 属性。整个页面：body { background-color: #f3f4f6; }。单个元素：<div style="background-color: #fef3c7;">。
HTML 中的 bgcolor 还能用吗？
不再是有效写法了。<body>、<table> 和 <td> 上的 bgcolor 属性在 HTML5 中已经过时。为了兼容老页面，浏览器仍然会绘制它，但正确的做法是在 CSS 中使用 background-color。
如何让背景颜色透明？
使用带 alpha 通道的颜色，比如 background-color: rgb(37 99 235 / 20%);。和 opacity 不同，这样做会让里面的文字保持完全可见。
background 和 background-color 有什么区别？
background-color 只设置颜色。background 是所有背景属性（颜色、图片、位置、尺寸、重复、附着、原点和裁剪）的简写，所以 background: red; 还会把背景图片重置为 none。
为什么 body 的背景颜色会填满整个窗口？
当 <html> 元素自己没有背景时，浏览器会把 body 的背景绘制到整个画布上，甚至超出 body 的盒子范围。如果你需要两者不同，就给 html 设置一个背景。
