Heim > Artikel > Web-Frontend > css3,background-clip/background-origin的使用场景，通俗讲解_html/css_WEB-ITnose
css3,background-clip/background-origin的使用场景，通俗讲解_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:26:281639Durchsuche
先不说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;
当然还有其他的一些属性，你们可以去网上查一下。