background-color：背景色

前面我们经常用background-color这个属性来设置元素的背景色，例如下面这条css可将段落的背景色设置为灰色

p {
   background-color: gray;}

如果想要元素的背景色向外延伸，则只需增加内边距即可

background-color可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

注意：background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

 

background-image：背景图像

除了可以为元素设置背景色之外，还可以用background-image属性为元素设置背景图像，其默认值是 none，表示元素背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {
   background-image: url(img/a.jpg);}

通常情况下背景应用于 body 元素。

注意：同background-color一样，background-image 也不能继承，事实上，所有背景属性都不能继承。背景图片会盖住背景颜色。也就是说背景图片的优先级要高于背景色。

 

background-repeat：背景重复

上面中的例子中，我们看到图片铺满了整个屏幕，如果需要设置是否需要平铺以及平铺的方向，可以使用background-repeat属性

属性值	效果
repeat	水平垂直方向上都平铺
repeat-x	水平方向上平铺
repeat-y	垂直方向上平铺
no-repeat	不平铺

 

 

 

 

 

 

 

 

 

background-position：背景定位

默认情况下，背景图片的位置的在元素的左上角，这时可以利用 background-position 属性改变图像在背景中的位置。

 

background-position可能的值

 

background-attachment：背景关联

scroll： 默认值，背景图像会随着页面其余部分的滚动而移动。

fixed：固定显示，相对于body固定。一般只用于body的背景设置。

1  2  3  4     
      5      6     13 14 15     
图像不会随页面的其余部分滚动。
16     
图像不会随页面的其余部分滚动。
17     ...18     
图像不会随页面的其余部分滚动。
19 20 

 

属性合写

可以将上面讲到的属性用background属性进行合写，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

background合写的顺序： 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。如：

1  2  3  4     
      5      6     11 12 13     
段落1
14     
段落2
15     ...16     
段落20
17 18