CSS 背景简写 详解
css3基础 2022-05-23 12:02:01小码哥的IT人生shichen
CSS 背景简写
CSS background - 简写属性
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。
而不是这样写：
body { background-color: #ffffff; background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top; }
您能够使用简写属性 background：
示例代码：
使用简写属性在一条声明中设置背景属性：
body { background: #ffffff url("tree.png") no-repeat right top; }
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("/i/photo/tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>background 属性</h1>
<p>background 属性是在一条声明中指定所有背景属性的简写属性。</p>
<p>在这里，背景图像只显示一次，并位于右上角。</p>
<p>我们还添加了右外边距，以使文本不会覆盖背景图片。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在使用简写属性时，属性值的顺序为：
- 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 | 规定背景图像的尺寸。 |
