为了缩短代码,还可以在一个中指定所有背景属性 单一财产。这称为速记属性。
而不是写:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
您可以使用简写属性 background
:
使用简写属性一次性设置背景属性 宣言:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
</body>
</html>
使用简写属性时,属性值的顺序为:
背景颜色
背景图像
背景重复
背景附件
背景位置
缺少其中一个属性值并不重要,只要 其他的按此顺序。请注意,我们在上面的示例中没有使用 background-attachment 属性,因为它没有值。
在一个声明中设置所有背景属性
设置背景图像是固定的还是与页面的其余部分一起滚动
指定背景的绘制区域
设置元素的背景颜色
设置元素的背景图像
指定背景图像的位置
设置背景图像的起始位置
设置背景图像的重复方式
指定背景图像的大小