css3 -- 背景图处理

Posted 2020-07-13 zhanghuiyun

1、多背景图片：

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

 

2、背景尺寸

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

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

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

 

3、背景剪裁和原点

 1 p{
 2    background-clip:border-box;    --默认值
 3    background-clip:content-box;   
 4    background-clip:padding-box;   
 5 }
 6 border-box背景显示在边框之后
 7 content-box背景显示在内容区域
 8 padding-box背景会一直显示到边框
 9 
10 记得浏览器前缀

设置背景开始计算的点

1 E{
2     background-origin：border-box；
3     background-origin：content-box；
4     background-origin：padding-box；
5 }    
6 注意浏览器前缀

 

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

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

 

5、图片遮罩

1 div{
2     background:url();
3    -webkit-background-size:17px 20px;
4    -webkit-mask-image:url();
5    -webkit-mask-position:40% 40%;
6    -webkit-mask-repeat:no-repect;
7    -webkit-mask-size:100%;
8 }