background-clip和background-size的使用

background-clip的使用

1.background-clip规定背景的绘制区域。

语法为background-clip: border-box|padding-box|content-box;：border-box只从border区域向外裁剪背景，默认值；padding-box指从padding区域向外裁剪背景；content-box指从content区域向外裁剪背景。
示例：

.background_clip{
width:256px;
height:180px;
padding:20px;
border:20px dotted #cad5eb;
background:#f0f3f9 url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-moz-background-clip:padding;
-webkit-background-clip:padding;
text-shadow:1px 1px white;
}

注意背景图片及背景颜色起始的位置

background-size的使用

1.background-size用来设置背景图的大小。

(1).语法：background-size:width,height。或者跟cover，contain。可以通过高宽来设置背景大小，
cover:背景图像缩放,保留图像原有的比例/长宽比,不管背景图像大于还是小于背景区域，都会覆盖背景区域,图像的宽度或高度等于或超过背景区域,再次,根据背景图像的比例是否匹配的背景区域,背景图像的某些部分可能不在背景区域内。

contain:背景图像缩放,同时保留图像原有的比例/长宽比,无论是图像的宽度或高度超过背景区域,以尽可能大的覆盖背景区域。因此,根据背景图像的比例是否匹配背景区域,可能会有一些背景图像覆盖不到背景地区。
示例：

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;//有多个图像
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;