css3,background-clip/background-origin的使用场景，通俗讲解

先不说background-clip/background-origin的用法，我们先来聊聊css背景方面的知识。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css背景知识点</title>
 6     <style>
 7         body,p{ 8             margin:0;
 9             padding:0;
10         }
11         p{12             width:100px;
13             height:100px;
14             background-color:pink;
15         }
16     </style>
17 </head>
18 <body>
19     <p></p>
20 </body>
21 </html>

现在p的宽和高各是100px，颜色的范围也是100*100的对吧，如果给它加上padding-top：10px呢？那么现在的高是110，颜色的背景是100*110对不？

因为背景是包括padding的，这对理解为什么需要使用background-clip和background-origin至关重要。

透露一下，大部分情况会使用在有用精灵图的背景上。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css背景知识点</title>
 6     <style>
 7         body,p{ 8             margin:0;
 9             padding:0;
10         }
11         .box{12             width:100%;
13             height:45px;
14             line-height:45px;
15             background-color:#ccc;
16
17         }
18         p{19             width:42px;
20             height:40px;
21             margin:0 auto;
22             background-size:50px 50px;
23             background:url("focus-icon.png") no-repeat 0 -50px;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="box">
29         <p></p>
30     </div>
31 </body>
32 </html>

效果图

我现在想让中间的爱心Y方向向下移动一点，我给p标签加上padding-top:10px;

效果如下

它并没有向下移动而是高度多出了一些，如果你理解了我上面说的，那你应该可以理解这个。

之所以会这样是因为背景包括了padding。但是我们现在并不想这样，那就可以用css3的属性background-clip，这是一个裁剪属性

加上background-clip:content-box;就可以了，什么意思呢？就是说从内容开始计算背景，那么就不会包括padding了。

应该懂了吧？

那么background-origin什么意思呢？

不知道你们有没有方向一个现象，就是我们使用精灵图的时候默认图片会显示在左上角。

如果你想改变它的位置就可以使用background-oringin

如果想从中间开始，那就设置成background-oringin:content-box;

当然还有其他的一些属性，你们可以去网上查一下。

css3,background-clip/background-origin的使用场景，通俗讲解相关推荐

理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用ba ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
android background大全,Background安卓版-Background壁纸预约 _5577安卓网
Background是一款全新的手机壁纸应用,软件运行在安卓平台,软件包含了丰富的高质量的手机壁纸应用,是少数派推荐的适合安卓手机的壁纸应用,那么想让自己手机更酷炫的用户使用体验吧! 温馨提示应用还 ...
CSS3属性之background
接上,background来咯目录 1.box-shadow (1)外阴影 (2)内阴影 (3)扩展玩法,传无数个参 2.background-image 3.background-size 4.b ...
【CSS3】背景(background)属性
1.背景颜色(color) 语法: background-color:颜色值; 默认的值是 transparent 透明色 2.背景图片(image) 语法: background-imag ...
CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
css3中的background
对background的两种运用:一是background中的线性渐变,background: linear-gradient(to bottom,#0e7bef,#0d73da);这个是对背景颜色从 ...
HTML背景渐变圆圈,背景渐变：html5+css3中的background: -moz-linear-gradient 用
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. 背景使用CSS渐变显示可以不使用图像就实现两 ...
html5+css3中的background: -moz-linear-gradient 用法
http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56 在CSS中background: -moz-linear-gradient 让 ...
背景图片html写法,CSS3背景图片background属性简写/连写
在开发中背景属性 background 还是很常用的, background 有很多属性,如: background-color 背景颜色 background-image 背景图像 backgrou ...

css3,background-clip/background-origin的使用场景，通俗讲解

css3,background-clip/background-origin的使用场景，通俗讲解相关推荐

最新文章

热门文章