CSS 背景简写


目录

    显示目录


CSS 背景 - 速记属性

为了缩短代码,还可以在一个中指定所有背景属性 单一财产。这称为速记属性。

而不是写:

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 属性,因为它没有值。



所有 CSS 背景属性

background

在一个声明中设置所有背景属性

background-attachment

设置背景图像是固定的还是与页面的其余部分一起滚动

background-clip

指定背景的绘制区域

background-color

设置元素的背景颜色

background-image

设置元素的背景图像

background-origin

指定背景图像的位置

background-position

设置背景图像的起始位置

background-repeat

设置背景图像的重复方式

background-size

指定背景图像的大小