CSS background 属性
定义和用法
background 属性是以下属性的简写属性：
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
即使缺少上面的一些值也是允许的，例如：background:#ff0000 url(smiley.gif); 是允许的。
| 默认值 | 查看单个属性 |
|---|---|
| 继承 | no |
| 可动画 | 是的，查看单个属性。 阅读关于可动画属性 |
| 版本 | CSS1 + CSS3 中的新属性 |
| JavaScript 语法 | object.style.background="red url(smiley.gif) top left no-repeat" Try it |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 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 property
