CSS中,背景样式是我们在网页设计中经常用到的一个属性,background是其中一个常用属性。除了background以外,CSS还提供了很多方便的简写属性,可以在一行代码中概括几个属性,更加便于我们的编写。
下面我们来看一下background的简写属性:
background: color image repeat position / size;
上面的代码中分别包含以下属性:
- color:背景颜色,可以使用颜色名称、十六进制、rgb等表示方式。
- image:背景图片,可以使用相对路径或者绝对路径的图片文件。
- repeat:规定如何重复背景图片。有以下几种取值:
- repeat-x:水平方向重复
- repeat-y:垂直方向重复
- no-repeat:不重复
- position:规定背景图片的位置。可以使用关键字或者百分比值,如"center"或者"50%"等。
- size:规定背景图片的大小。可以使用像素或者百分比值,如"200px 100px"或者"50% 50%"等。
需要注意的是,除了color以外,其他属性都是可选的。我们可以只写其中一些属性,也可以写全部。
通过简写属性,我们可以更加方便地编写CSS。例如:
background: #f3f3f3 url('bg.gif') repeat-x top center / cover;
上述代码将背景颜色设为#f3f3f3,背景图片为bg.gif,并水平方向重复,位置为顶部中间,大小覆盖整个区域。