css3 -- 背景图处理

Posted zhanghuiyun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 -- 背景图处理相关的知识,希望对你有一定的参考价值。

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 }

 

以上是关于css3 -- 背景图处理的主要内容,如果未能解决你的问题,请参考以下文章

css3 序列帧动画制作出来有4条白边,求大神告知怎么去掉,或者怎么处理下,在线等

炫酷 CSS 背景效果的 10 个代码片段

css和css3的区别

CSS3实现多种背景效果

css中的背景图怎么改变大小

css 图片处理