CSS3--背景：图片大小、位置区域和剪裁

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

一、指定图片大小

background-size

参数可以是带单位的数字或者百分比。

div{
background:url(img.jpg);
background-size:100px 150px;//50% 50%;
background-repeat:no-repeat;
}

二、背景图片的位置区域

background-origin

对于盒子模型，包含外边距、边框、内边距和内容几部分，这几部分内容是一层层嵌套的。该属性设置的就是背景图片将从哪里开始显示，参数值和其代表意义如下：

• border-box：从边框开始显示，若边框较粗，会遮盖背景图片内容
• pdding-box：从内边距开始显示
• content-box：从内容开始显示，内边距部分为空白无背景图

div{
background:url(img.jpg);
background-size:100px 150px;//50% 50%;
background--origin:content-box;
background-repeat:no-repeat;
}

三、背景图片剪裁

background-clip

参数值和origin一样有三种，background-origin是根据定义在不同的位置显示完整图片，而background-clip则是只显示对应部分的图像内容，其余部分裁剪掉。其默认属性为border-box。

div{
background:url(img.jpg);
background-size:100px 150px;//50% 50%;
background--origin:content-box;
background-repeat:no-repeat;
background-clip:padding-box;
}

另外：css3还能够添加多个背景图片，只需在设定的参数之间用逗号隔开即可。

div{
background-image: url(img1.png),url(img2.jpg);
background-repeat: no-repeat, repeat;
background-size:100% 100%,20% 20%;
padding: 15px;
}

值得一提的是，根据图片添加的顺序不同，每张图片所处的图层也不相同。

如上述例子中img1所在图层位于img2的上方，会对img2造成遮盖效果，因此可以利用这个特点合理定位背景图片和其他属性从而创造出由多张图片组合而成的背景。