CSS 背景
CSS 背景属性用于定义元素的背景效果。
CSS background-color
background-color 属性指定元素的背景色。
通过 CSS,颜色通常由以下方式指定:
- 有效的颜色名称 - 比如 "red"
- 十六进制值 - 比如 "#ff0000"
- RGB 值 - 比如 "rgb(255,0,0)"
请查看 CSS 颜色值,获取可能颜色值的完整列表。
其他元素
您可以为任何 HTML 元素设置背景颜色:
在这里,<h1>、<p> 和 <div> 元素将拥有不同的背景色:
不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低,越透明:
注意:使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度,例如上面的例子,请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度:
CSS 背景图像
CSS 背景图像
background-image 属性指定用作元素背景的图像。
默认情况下,图像会重复,以覆盖整个元素。
页面的背景图像可以像这样设置:
body {
background-image: url("paper.gif");
}
注意:使用背景图像时,请使用不会干扰文本的图像。
还可以为特定元素设置背景图像,例如 <p> 元素:
p {
background-image: url("paper.gif");
}
CSS 背景重复
CSS background-repeat
默认情况下,background-image 属性在水平和垂直方向上都重复图像。
某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,如下所示:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>奇怪的背景图片...</p>
</body>
</html>
如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;),则背景看起来会更好:
CSS 背景附着
CSS background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动):
指定应该固定背景图像:
body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
指定背景图像应随页面的其余部分一起滚动:
body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; }
CSS 背景简写
CSS background - 简写属性
如需缩短代码,也可以在一个属性中指定所有背景属性。它被称为简写属性。
而不是这样写:
body { background-color: #ffffff; background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; }
使用简写属性在一条声明中设置背景属性:
body { background: #ffffff url("tree.png") no-repeat right top; }
在使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。请注意,在上面的例子中,我们没有使用 background-attachment 属性,因为它没有值。
所有 CSS 背景属性
属性 | 描述 |
---|---|
background | 在一条声明中设置所有背景属性的简写属性。 |
background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
background-clip | 规定背景的绘制区域。 |
background-color | 设置元素的背景色。 |
background-image | 设置元素的背景图像。 |
background-origin | 规定在何处放置背景图像。 |
background-position | 设置背景图像的开始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
background-size | 规定背景图像的尺寸。 |