您的位置：首页 > Web前端 > CSS

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

2016-02-25 18:12 671 查看

先不说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;

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航