层叠样式表/背景

背景属性

有五个属性控制元素的背景

background-color W3C规范 CSS1 CSS2.1: 设置背景颜色，如果未指定背景图像或图像未覆盖整个元素，则将看到此颜色。它也会显示在图像中的任何透明区域。颜色可以设置为任何 CSS颜色或关键字 transparent。
background-image W3C规范 CSS1 CSS2.1: 用作背景的图像。
background-repeat W3C规范 CSS1 CSS2.1: 控制背景图像的平铺 (可能的值: repeat | repeat-x | repeat-y | no-repeat | inherit)
background-attachment W3C规范 CSS1 CSS2.1: 背景是否与页面一起滚动 (默认) 或者是否固定在视窗内？
background-position W3C规范 CSS1 CSS2.1: 将图像放置在元素的边界框内。

您应该考虑提供背景颜色以及背景图像，以防用户禁用了图像。

示例

p {
  background-color: #ccc
}

body {
  background-color: #8cf;
  background-image: url(sea.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom
}

简写属性

W3C规范 CSS1 CSS2.1

background 简写属性可用于在一个声明中设置所有五个单独的背景属性，例如

p {
  background-color: #ccc
}

body {
  background: #8cf url(sea.jpg) no-repeat fixed bottom
}

等效于前面的示例。

注意，如果从 background 属性中省略了一些值，则缺失值的单个属性将设置为其初始值。如果多个规则在元素上设置背景属性，则记住这一点很重要。例如

div#navigation {
  background: #933
}

等效于

div#navigation {
  background-color: #933;
  background-image: none; /* initial value */
  background-repeat: repeat; /* initial value */
  background-attachment: scroll; /* initial value */
  background-position: 0% 0% /* initial value */
}

高级透明度

透明度是影响所有子级的块级属性。要使用具有 alpha 通道的颜色，请参见 RGBA 和 HSLA。

背景属性中的透明度仍然是一个新概念，并非所有网络浏览器都兼容，但这里有一点关于此功能的信息

filter: alpha(opacity=40); -moz-opacity:.40; opacity:.40;

添加 alpha(opacity=40) 将添加 40% 的 alpha 透明度，但如前所述，这仍然不适用于所有浏览器，例如要使其在 Firefox 上运行，必须使用 -moz 技巧。所以 -moz-opacity:.40 显然会做同样的事情，但这部分代码只与 Firefox 用户相关。

transparency W3C规范 CSS3

外部链接

一个很好的演示，展示了在 css/edge 上使用背景可以实现的效果

一个很好的关于在背景中使用透明度的教程。