默认情况下，背景颜色的显示范围为 border-box 区域，不重复的背景图像的显示范围为 padding-box 区域，而重复的背景图像的显示范围为 border-box 区域。然而，有时候却希望控制背景的显示范围。

这时，就可以通过 background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | content-box ，默认值为 border-box。

CSS中的裁剪区域跟 canvas 中的裁剪区域含义相同，设置裁剪区域后，只有落到裁剪区域内的内容会被显示，而落到裁剪区域外的内容不会被显示出来。

这里对每个取值定义了一个类，然后分别应用到一个容器，来看看 background-clip属性在不同取值下的表现。代码如下：

1. div {
2. width : 120px ;
3. height : 90px ;
4. padding : 20px ;
5. border : 10px dashed #888;
6. background - color : yellow ;
7. background - repeat : no - repeat ;
8. background - image : url ( img / bg . gif );
9. }
10. . border - box {
11. background - clip : border - box ;
12. }
13. . padding - box {
14. background - clip : padding - box ;
15. }
16. . content - box {
17. background - clip : content - box ;
18. }

1. <div class = "border-box" ></div>
2. <div class = "padding-box" ></div>
3. <div class = "content-box" ></div>

上述代码的运行结果如图 4‑35 所示：

图4-35 background-clip属性效果

从上图可以看到，background-clip属性可以同时控制背景图像和背景色的显示范围，而background-origin 属性则不同，它只能控制背景图像，不能控制背景色。

歪脖先生 ，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《 HTML宝典 》、《 揭秘CSS 》、《 Less简明教程 》、《 JSON教程 》、《 Bootstrap2用户指南 》、《 Bootstrap3实用教程 》，并全部在 GitHub 上开源。

背景裁剪区域默认情况下，背景颜色的显示范围为 border-box 区域，不重复的背景图像的显示范围为 padding-box 区域，而重复的背景图像的显示范围为 border-box 区域。然而，有时候却希望控制背景的显示范围。这时，就可以通过 background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | cont... CSS 中可以改变文字的颜色还有元素的 背景 颜色。可以用颜色关键字来定义颜色，如red，但是这些颜色关键字并不常用。 transparent transparent可以让文字或 背景 变的完全透明的颜色，它就像rgba(0,0,0,0)的缩写。 currentColor currentColor代表原始的color 属性 的计算值。比如当前元素color为红色， 背景 色设置为currentColor，那... <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...