CSS background 属性
示例
在一个声明中设置不同的背景属性
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
亲自试一试 »
定义和用法
background 属性是以下属性的简写形式：
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
即使上述值之一缺失，例如 background:#ff0000 url(smiley.gif); 也是允许的。
| 默认值 | 参见各个属性 |
|---|---|
| 继承 | 否 |
| 可动画 | 是，参见各个属性。 了解有关可动画属性的信息 试一试 |
| 版本 | CSS1 + CSS3 中的新属性 |
| JavaScript 语法 | object.style.background="red url(smiley.gif) top left no-repeat" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注意：请参见下面每个值的各个浏览器支持。
CSS 语法
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
注意：如果简写声明中的某个属性是 bg-size 属性，则必须使用 /（斜杠）将其与 bg-position 属性分开，例如 background:url(smiley.gif) 10px 20px/50px 50px; 将导致背景图像，从左侧定位 10 像素，从顶部定位 20 像素，图像大小为宽 50 像素，高 50 像素。
注意：如果使用多个 background-image 源但也要使用 background-color，则 background-color 参数需要位于列表的最后。
属性值
| 值 | 描述 | CSS | 演示 |
|---|---|---|---|
| background-color | 指定要使用的背景颜色 | 1 | 演示 ❯ |
| background-image | 指定要使用的一个或多个背景图像 | 1 | 演示 ❯ |
| background-position | 指定背景图像的位置 | 1 | 演示 ❯ |
| background-size | 指定背景图像的大小 | 3 | 演示 ❯ |
| background-repeat | 指定如何重复背景图像 | 1 | 演示 ❯ |
| background-origin | 指定背景图像的定位区域 | 3 | 演示 ❯ |
| background-clip | 指定背景图像的绘制区域 | 3 | 演示 ❯ |
| background-attachment | 指定背景图像是固定不动还是与页面其余部分一起滚动 | 1 | |
| initial | 将此属性设置为其默认值。 了解有关initial的信息 | 3 | |
| inherit | 从其父元素继承此属性。 了解有关inherit的信息 | 2 |
相关页面
CSS 教程：CSS 背景，CSS 背景（高级）
HTML DOM 参考：background 属性
