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%;
}