教育改变生活

标题: CSS-6 背景+背景图片 [打印本页]

作者: 却尘 时间: 2023-10-9 11:15
标题: CSS-6 背景+背景图片

CSS 背景

CSS 背景属性用于定义元素的背景效果。

在这些章节中，您将学习如下 CSS 背景属性：

· background-color

· background-image

· background-repeat

· background-attachment

· background-position

CSS background-color

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

实例

页面的背景色设置如下：

body {

background-color: lightblue;

}

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

· 有效的颜色名称 - 比如 "red"

· 十六进制值 - 比如"#ff0000"

· RGB 值 - 比如"rgb(255,0,0)"

请查看 CSS 颜色值，获取可能颜色值的完整列表。

其他元素

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

实例

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

h1 {

background-color: green;

}

div {

background-color: lightblue;

}

p {

background-color: yellow;

}

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

实例

div {

background-color: green;

opacity: 0.3;

}

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

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

100% opacity

60% opacity

30% opacity

10% opacity

您从我们的 CSS 颜色章节中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道一起使用（RGBA） - 该通道指定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：您可在我们的 CSS 颜色一章中学到有关 RGBA 颜色的更多知识。

实例

div {

background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */

}

CSS背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例

页面的背景图像可以像这样设置：

body { background-image: url("paper.gif");}
实例

本例展示了文本和背景图像的错误组合。文字难以阅读：

body { background-image: url("bgdesert.jpg");}

注意：使用背景图像时，请使用不会干扰文本的图像。

还可以为特定元素设置背景图像，例如 <p> 元素：

实例p { background-image: url("paper.gif");}

欢迎光临教育改变生活 (http://bbs.goldoar.com/)