CSS3 Backgrounds相关介绍

1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认的位置。

2.在CSS3中，我们可以给background-position属性指定高达4个值:开始的两个值代表了水平轴;后面的两个值代码垂直轴,这意味着我们可以相对于上下左右任意一个角落定位，而不是之前的只能相对于左上角定位。

3.我们可以使用正值决定背景图片的位置，也可以使用负值。正值所产生的效果是把背景图片往右下方移动——元素背景区域内部。负值产生的效用是把背景图片往左上方向移动——元素背景区域外面。

p{ background-position:left 10px top 15px; }

4.background-repeat默认情况下，背景图片会沿着x轴，y轴重复。同样的，是起始于padding-box的左上角。在CSS3中，我们定义repeat的时候可以使用两个值代替一个值。其中第一个值代表水平轴;第二个repeat表示垂直轴;如果我们只使用一个值，浏览器会自动解释成两个值。这就保证了background-repeat属性向后兼容。

div{background-repeat:repeat repeat;}

5.CSS3允许我们使用background-repeat属性两个新值：space和round。space值的功效可以简单理解为图片的两端对齐平铺，多出来的空间用空白代替;round属性的效果也可以说是两端对齐，但其多出来空间通过自身的拉伸来填充。不过需要注意的是使用这种方法图片可能会被拉伸或扭曲。这些新值让我们在布局背景图片的时候更灵活了。例如我们可以使用两个值来定义不同的垂直和水平行为：

div{background-repeat:space no-repeat;}

6.在CSS3中我们可以使用三个全新的属性，如下：

background-origin
background-clip
background-size

6.1background-origin是用来决定背景图片定位在哪个盒子中。我们可以使用background-origin属性的三个值进行背景图片的定位，它们是：content-box、padding-box以及border-box。

6.2background-clip属性是用来决定在背景区域中背景图片剪裁的位置。其支持三个值，为：content-box、padding-box以及border-box。
6.3在CSS3中允许我们使用background-size属性来控制背景图片的大小。我们可以使用长度值或是百分比，或者是两个新的关键字：contain和cover。如果只设置了一个值，那么第二个值会自动用初始值”auto“代替。“contain“值的效用是按比例将图片缩放到最大尺寸以使其高宽都在背景区域里面，其主要用在背景图片比容器大的情况下。需注意使用该值图片可能有扭曲。“cover“值的效用是按比例将图片缩放到最小尺寸以使其完整覆盖背景区域，其主要用在背景图片比容器小的情况下。需注意使用该值图片可能有扭曲。

div { background-size: contain; }

div { background-size: cover; }

属性的缩写

background 各个值的次序依次如下：

当我们对同一个元素应用两个background规则的时候会发现有一个是不起作用的。

多背景(Multiple backgrounds)

background-image:url(01.png),url(02.png),url(03.png);

background-position:left top,50% 30%,10px 20px;

background-size:……

}

每个图片的大小，定位，平铺都是根据其他背景属性想对应的值。如果逗号分隔的值比背景图片层要少，浏览器会拿使用过的列表中的值来充数来使分隔的值数目足够。背景图片以层的形式显示 – 第一个在其他之上。列表中的第一个图片是离用户最近的，而下一个图片会被渲染到第一个之后，以此类推。

所有的元素只能定义一个背景颜色，background-color所在的层被赋予为最底层，称之为“终极层(final layer)”。background-color层在所有的background-image层之下。

缩写

所有的这些背景属性都可以合并成单独的一行缩写。多背景图的缩写规则与单背景图是一致的，然后中间用逗号隔开。

p {

background:

url (01.gif) no-repeat, /*图片1*/

url (02.gif) repeat left bottom, /*图片2*/

url (03.gif) repeat-y 10px 5px /*图片3*/

}

与一般写法中一样，每个背景图片都是以层的形式显示，第一个在其他之上。

background-color只有设置在“终极层”上才能在让所有背景图显示。如果background-color值被添加到其他杂七杂八的层（不是“终极层”）上，那么整个规则将不会显示。添加背景颜色比较安全的做法是使用独立的background-color声明:

p {

background:

url (01.gif) no-repeat, /*图片1*/

url (02.gif) repeat left bottom, /*图片2*/

url (03.gif) repeat-y 10px 5px ; /*图片3*/;

background-color:yellow ;

}

关于一些复杂缩写

一些浏览器不认识缩写规则中两个盒子值(origin和clip)的使用，如果有这玩意，这些浏览器会直接忽视整个声明。因此，就目前而言，缩写最好用在不太复杂的声明上。但是如果你想包含全部的7个属性，还是使用一般写法代替为妙。

Multiple backgrounds和渐变

p {

background:

url (01.gif) no-repeat 0 0,

linear-gradient(left,blue,green);

}