css3 -- 背景图处理

1、多背景图片：

 p{
    background-image:url() , url();
    background-position:95% 90% , 50% 50%;
    background-repect: no-repect;
 }
 background-repect只有唯一的一个值，如果一个属性的值数量比其背景数量少，这样这些值就会被重复
 background-color是唯一一个不接受多个值得元素，颜色层会一直堆放在图片层下方
 p{
    background：
    url（）no-repect 95% 85%，
    #ccc url() no-repeat 50% 50%;
 }

2、背景尺寸

 div{background-size:100px 100px;}

contain -- 图片尽可能的放大，不超过包含元素的高度和宽度

cover -- 图片放大到包含元素的宽度或高度

3、背景剪裁和原点

 p{
    background-clip:border-box;    --默认值
    background-clip:content-box;
    background-clip:padding-box;
 }
 border-box背景显示在边框之后
 content-box背景显示在内容区域
 padding-box背景会一直显示到边框

 记得浏览器前缀

设置背景开始计算的点

 E{
     background-origin：border-box；
     background-origin：content-box；
     background-origin：padding-box；
 }
 注意浏览器前缀

4、图片精灵（背景图剪裁）

 E{background-image：-moz-image-rect（url， top，right，bootom，left）；}

5、图片遮罩

 div{
     background:url();
    -webkit-background-size:17px 20px;
    -webkit-mask-image:url();
    -webkit-mask-position:40% 40%;
    -webkit-mask-repeat:no-repect;
    -webkit-mask-size:100%;
 }