CSS Backgrounds(背景)

category: HTML / CSS

CSS 背景属性用于为元素添加背景效果。

在这些章节中，您将了解以下 CSS 背景属性：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background（简写属性）

CSS 背景颜色

该background-color属性指定元素的背景颜色。

例子

页面的背景颜色设置如下：

body {   background-color: lightblue; }

对于 CSS，颜色通常由以下方式指定：

• 有效的颜色名称 - 例如“红色”
• 十六进制值 - 例如“#ff0000”
• RGB 值 - 如“rgb(255,0,0)”

其他元素

您可以设置任何 HTML 元素的背景颜色：

例子

这里，<h1>、<p> 和 <div> 元素将具有不同的背景颜色：

h1 {   background-color: green; }  
div {   background-color: lightblue; }  
p {   background-color: yellow; }

不透明度/透明度

该opacity属性指定元素的不透明度/透明度。它可以取 0.0 - 1.0 之间的值。值越低，越透明： 不透明度 1 不透明度0.6 不透明度0.3 不透明度0.1

例子

div {   background-color: green;   opacity: 0.3; }

注意：当使用该opacity属性为元素的背景添加透明度时，其所有子元素都会继承相同的透明度。这可能会使完全透明元素内的文本难以阅读。

使用 RGBA 的透明度

如果您不想对子元素应用不透明度（如上面的示例所示），请使用RGBA颜色值。以下示例设置背景颜色而不是文本的不透明度： 100% 不透明度 60% 不透明度 30% 不透明度 10% 不透明度

您可以使用 RGB 作为颜色值。除了 RGB 之外，您还可以使用带有alpha通道 (RGB A ) 的 RGB 颜色值 - 它指定颜色的不透明度。

RGBA 颜色值通过以下方式指定：rgba(red, green, blue, alpha )。alpha 参数是 0.0（完全透明）和 1.0（完全不透明）之间的数字。

例子

div {   background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */ }