你不知道的CSS背景—css背景属性全解

CSS 背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的CSS属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。

首先列举一下 CSS 中关于元素背景的所有属性并简要描述了其作用，其中后面几个属性是在 CSS3 中新加入的。

属性 描述 备注 background 简写属性，作用是将背景属性设置在一个声明中。 background-color 设置元素背景颜色 background-image 把图像设置为背景 background-repeat 设置背景图像是否及如何重复。 仅作用与背景图片，不会影响背景颜色 background-position 设置背景图像的起始位置。 仅作用与背景图片，不会影响背景颜色 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 仅作用与背景图片，不会影响背景颜色 background-origin 规定背景图片的定位区域。 CSS3， 仅作用与背景图片，不会影响背景颜色 background-clip 规定背景的绘制区域。 CSS3同时作用域背景图片和背景颜色 background-size 规定背景图片的尺寸。 CSS3

下面一一 “理清”这些属性

background 这个复合属性就不多说了，它可以将其他的属性值写在一起

1 background:[ background-color >] [,background-image] [,background-repeat] [,background-attachment] [,background-position]... 1.background-color

background-color 可以使用十六进制颜色、 RGB 颜色、 RGBA 颜色、 HSL 色彩、 HSLA 颜色 、 颜色关键字等表示的颜色 ，然而很多初级开发者不清楚的是backgroud-color在元素盒模型中覆盖的范围是多大。下面我们测试一下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 html lang = "en" > head > meta charset = "UTF-8" > title >Document title > style type = "text/css" > *{ margin: 0px; padding: 0px; } div{ width: 400px; height: 200px; margin: 20px; padding: 15px; border: 10px dotted red; background-color: green; } style > head > body > div > div > body > html > 为了验证背景颜色有没有铺盖到边框，这里设置了边框的样式为点线形式，在现代标准浏览器中测试（包括IE8及以上 ）如下左图所示，而在IE6环境中测试如下右图所示。

所以结论是 : CSS2 元素颜色背景的显示范围与 CSS2.1 、 CSS3 并不相同。在 CSS2 中（支持IE6），颜色背景的显示范围是指内部留白（包括 padding ）之内的范围 ，不包括边框；在 CSS2.1 和 CSS3 中（包括 IE8 以上测试），背景在整个盒模型中，它是布满整个元素的盒子区域的（但是仍然不包括外边 margin 范围） 。

2.background-image:none ||

元素的图片背景是元素的总大小，包括 padding 和 border （但不包括 margin ）。 默认情况下， background-image 放置在元素的左上角, 并重复垂直和水平方向 ( 后面会讲到 background-position 默认值为 0% 0%,background-repeat默认是repeat) , 与 background-color 的默认覆盖范围是相同的， 在现代标准浏览器中 铺满padding和border，在IE6中却不包括边框。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

"text/css" > *{ margin : 0px ; padding : 0px ; } div{ width : 400px ; height : 200px ; margin : 20px ; padding : 15px ; border : 10px dotted red ; background-color : green ; background-image : url (images.jpg); }

左图为现代标准浏览器， 在IE浏览器中测试，可以将其渲染模式设置为IE6.

3. background-repeat:repeat( 默认 )||repeat-x||repeat-y||no-repeat background-repeat 属性非常好理解，可以决定图片背景是否在水平或者垂直方向重复，其默认值是repeat,即在两个方向都重复。 然而，很多初级开发者不知道的是，当设置background-repeat为no-repeat时，在现代标准浏览器中图片背景的覆盖范围会发生变化 ，下面测试一下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

"text/css" > *{ margin : 0px ; padding : 0px ; } div{ width : 400px ; height : 200px ; margin : 20px ; padding : 15px ; border : 10px dotted red ; background-color : green ; background-image : url (test.jpg); background-repeat : no-repeat ; }

这里换上了一个比div要大的图片，左图为现代标准浏览器的测试结果，右图为IE6中测试结果。

可以很明显的发现，左图中，上边框和左边框没有被图片背景覆盖，露出了绿色的背景颜色。而在IE6环境中表现并没有发生变化。

4. backgroud-positon:%x %y|| xpos ypos|| 关键字 设定背景位置时可以使用三种值： 关键字、百分比、绝对或相对单位的数值 。 关键字为 left 、 right 、与 top 、 bottom 、 center 的组合 , 可以使用两个值 分别设定水平和垂直位置。 关键字指的顺序不重要， left bottom 和 bottom left 意思相同。为了设定的值在所有浏览器 中都有效，最好不要混用关键字值与数字值。 使用数值（比如 40% 30%）时，第一个值表示水平位置，第二个值表示垂直位置。要是只设定 一个值，则将其用来设定水平位置，而垂直位置会被设为 center。

需要注意的是：在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。换句话说，如果设定了33% 33%，则图片水平 33%的位置与元素水平 33%的位置对齐。垂直方面也一样。可以通过 center center 把图片的中心点定位在了元素的中心点。像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

"text/css" > *{ margin : 0px ; padding : 0px ; } div{ width : 400px ; height : 200px ; margin : 20px ; padding : 15px ; border : 10px dotted red ; background-color : green ; background-image : url (images.jpg); background-position : 50% 50% ; }

左图为现代标准浏览器，右图为IE6,可以看到图片被定位到正中间，并在水平和垂直方向重复，这也说明了使用百分比设置定位时是同时作用在元素和背景图片上的，如若不然，图片应该位于黄色方框所在的位置。

接下来我们刨根问底，background-position的默认定位起始点是哪里？是边框？还是内留白padding?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

"text/css" > *{ margin : 0px ; padding : 0px ; } div{ width : 400px ; height : 200px ; margin : 20px ; padding : 15px ; border : 10px dotted red ; background-color : green ; background-image : url (images.jpg); background-position : 10px 10px ; /*background-repeat: no-repeat;*/ }

从图中我们找到沿水平和垂直方向重复前的原始图片，如图中黄色方框所示，在css中我们设置的 background-position:10px 10px ;整个数值正好是边框的宽度，如果定位起点是边框外边缘，则图片的左上角应该位于边框左上角外边缘，而实际显示却不是， 图片起点是相对于边框内边缘或者说内留白padding的外边缘定位的，然后水平和垂直重复铺满包括边框的区域。

如果加上 background-repeat: no-repeat 效果更容易看出来，下图是现代标准浏览器的测试结果，

有意思的是，还可以使用负值。这样就可以把图片的左上角定位到元素外部，从而在元素中只 能看到部分图片。当然，给 background-position 设定足够大的正值，也可以把图片的右下角推到元素外部，从

而在元素中也只能看到部分图片,甚至把让个背景图片元素外部，位于元素外部的那部分图片不会显示这也没什么实际意义了。既然 background-position 可以设置负值，我们考虑第3节出现的问题： 当设置 background-repeat 为 no-repeat 时， 上边框和左边框没有被图片背景覆盖。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

"text/css" > *{ margin : 0px ; padding : 0px ; } div{ width : 400px ; height : 200px ; margin : 20px ; padding : 15px ; border : 10px dotted red ; background-color : green ; background-image : url (test.jpg); background-position : -10px -10px ; background-repeat : no-repeat ; }

你不知道的CSS背景—css背景属性全解

関連記事