《三》CSS3 背景

background-size 属性：

用来设置背景图片的尺寸。

CSS3 以前，背景图片的大小由图片的实际大小决定。

属性值：

1. length：属性值为像素数。设置背景图片的宽度和高度。第一个值为宽度，第二个值为高度。

2. percentage：属性值为百分比。将计算相对于父元素的百分比。第一个值为宽度，第二个值为高度。

3. cover：属性值就为 cover。会保持图片的纵横比并缩放至完全覆盖背景区域。

   假如背景区域的宽高不能恰好包含背景图片的话，背景图片会等比例放大以可以完全覆盖背景区域，一部分就会被裁切掉。

   

4. contain：属性值就为 contain。会保持图像的纵横比并缩放至完全容纳在背景区域中。

   假如背景区域的宽高不能恰好包含背景图片的话，背景图片会等比例缩小以可以容纳显示在背景区域中，背景某些区域会有空白。

   

background-size: 100px 200px; // 设置背景图片的宽度为 100px，高度为 200px

background-origin 属性：

用来设置背景图片的起点位置，该属性规定 background-position 属性是相对于什么位置来定位的。

属性值：

1. border-box：以边框的左上角为参考点放置背景图像。
2. padding-box：默认值，以内边距的左上角为参考点放置背景图像。
3. content-box：以内容区域的左上角为参考点放置背景图像。
   

background-clip 属性：

用来设置背景图片的裁剪区域。

属性值：

1. border-box：默认值，背景图片被裁剪至背景区域的边框区。

   .box {
   	width: 300px;
   	height: 300px;
   	border: 10px dotted #000;
   	padding: 60px;
   	background-image: url(images/0.jpg);
   	background: border-box;
   }
   

   

2. padding-box：背景图片被裁剪至背景区域的内边距区。

   .box {
   	width: 300px;
   	height: 300px;
   	border: 10px dotted #000;
   	padding: 60px;
   	background-image: url(images/0.jpg);
   	background: padding-box;
   }
   

   

3. content-box：背景图片被裁剪至背景区域的内容区。

   .box {
   	width: 300px;
   	height: 300px;
   	border: 10px dotted #000;
   	padding: 60px;
   	background-image: url(images/0.jpg);
   	background: content-box;
   }