CSS的四大布局层级 和 HTML标签的‘生态系统’（二）------背景层

标签：css   attach   contain   百分比   html   origin   size   url   class   

　　背景层，顾名思义，就是一个元素的背景，背景是用 CSS 属性中的 background 来实现的。background 属性是个缩写属性，其展开后包含很多分支属性：

　　background-color : 背景色，使用该属性可以为一个元素添加一个背景色，添加背景颜色的取值大致可分为4种。

background-color : red ;
background-color : #ff0000 ;
background-color : rgb(255,0,0) ;
background-color : rgba(255,0,0,1);
/*以上四种表示方式，均为红色背景，最后一种可设置透明度*/

　　background-image : 背景图片，使用该属性可以为一个元素添加一张或多张背景图片，此处可以看到的图片，我们可以理解为是一幅彩绘的背景色，它是紧紧贴到元素表面的，密不可分，并且只有在该元素面上才可以看到这张图片，如果图片大，元素小，则图片可能显示不全。

插入背景图片的方式，示例如下：

background-image : url(../images/1.jpg) ;

　　background-repeat : 背景重复，当插入背景图片后，如果是小图片，大元素，则图片会无限平铺直至铺满整个元素的表面。如果我们只想要一张完整的图片出现在元素表面，不希望平铺时，则使用该属性。示例如下：

background-repeat：no-repeat ; /*不重复*/
background-repeat：repeat-x ;   /*只在X轴上重复*/
background-repeat：repeat-y ;   /*只在Y轴上重复*/

　　background-position : 背景位置，当使用 no-repeat 值，限制了背景图只能插入一张后，图片会出现在元素表面的左上角，然而，在很多情况下，我们并不想要图片出现在左上角，这时，我们就可以使用该属性去改变背景图片的位置信息，它可以有很多取值，百分比，像素，单词等等。示例如下：

background-position : 50% 50%；
background-position : 20px 200px ;
background-position : center center ;

　　background-attachment，这个属性，我只说一个取值，就是fixed。当一个背景图片设置了这个属性，且取值是fixed时，那么，这张图片就不再是随着元素的移动而移动了，它变成了镶嵌在页面中的一幅背景图，而添加背景设置了该属性的这个元素，变成了一个类似于“窗口”的存在，只有透过这个“窗口”，才能看到页面中的这幅背景图，其他情况，该背景图均不可见。

　　background-size，设置背景图片大小的属性，是CSS3中新增的属性之一，其值可以是像素，百分比，cover，contain等。示例如下：

background-size : 200px 200px ; /*背景图片的大小为200*200的大小*/
background-size : 50% 50% ; /*背景图片的大小为容器的四分之一大小*/
background-size : cover ; /*背景图片宽高的较小者铺满元素，较大者等比缩放*/
background-size : contain ; /*背景图片宽高的较大者铺满元素，较小者等比缩放*/

　　background-clip，取值可以是border-box，padding-box，content-box，该属性是表示背景图片在哪一个区块及其以内的区块中显示。

　　background-origin，取值可以是border-box，padding-box，content-box，该属性是表示背景图片如果在左上角，那么它的原点会从哪一个区块开始。

　　以上这些属性就是背景层布局中常用的一些属性，想要理解CSS属性，只是看资料是没有太大的用处的，更多的还是需要总结归纳后自己去动手实践，验证是否正确，在验证中汲取的知识，是最牢固的。

CSS的四大布局层级 和 HTML标签的‘生态系统’（二）------背景层

标签：css   attach   contain   百分比   html   origin   size   url   class   

原文地址：http://www.cnblogs.com/nation-blue/p/6680714.html