什么是background-clip?
background-clip属性用于设置背景颜色的范围。打个比方我们绘制一个200x200像素的背景红色的div块。
![46a9a10cf0b0c391dd5a7eedf34d5ece.png](https://i-blog.csdnimg.cn/blog_migrate/3f30bfa6634334c360bcef23b72ea6f5.jpeg)
![5684f86c4c799e723729e17bb49ca3c8.png](https://i-blog.csdnimg.cn/blog_migrate/bc6c820e5b8cd2d8467ae0b5417d4a50.jpeg)
当我们增加内边距20的时候
![673d999f9b54f9d709596f10492923e2.png](https://i-blog.csdnimg.cn/blog_migrate/7d56ab55e3e4aba1157d107f070ca5a1.jpeg)
![5106ab7273013c27a3c1f89754b2ba32.png](https://i-blog.csdnimg.cn/blog_migrate/74f4b2612948ed42fe86b41651b4e354.jpeg)
我们可以发现与之前的相比,背景颜色也同样增大了20px的内边距范围。
只需要内容区域是背景色
现在我们有一个问题,只需要内容区域是背景色,而内边距不需要背景色,我们应该如何实现呢?这时候就需要这章节我们所学习的background-clip背景范围属性。用于设置元素背景的范围区域。
background-clip参数border-box;
![511cf24ca8695d5e3ac997587d15b330.png](https://i-blog.csdnimg.cn/blog_migrate/36f0eb1b281ad564f56b588b155bc437.jpeg)
![efecebaa5525bae91c21a8ae7c4cb205.png](https://i-blog.csdnimg.cn/blog_migrate/59d2a326e985b018bd04251a9174afbe.jpeg)
这个属性是我们正常设置背景颜色的默认范围,即包括边框内边距以及内容区域。
background-clip参数padding-box;
padding-box是设置内边距和内容为背景范围。与border-box没有太大差别,目前想不出案例,就当做一致吧。
![f0eac32080869d25a1043faf82c52c64.png](https://i-blog.csdnimg.cn/blog_migrate/4fa0b335f031a1c3d18c51b12e5d919a.jpeg)
![e8cdc8dff9edd3fe34d3a8bbd0f431ee.png](https://i-blog.csdnimg.cn/blog_migrate/94763300d42e797b2ffbe3c21440ab52.jpeg)
background-clip参数content-box;
content-box属性也就是这篇文章开头的案例想实现的方法。它是将内容区域作为背景范围。即设置背景颜色也仅仅渲染内容区域。
![e8dcb19ae25d74df11cf6d1f16c99a69.png](https://i-blog.csdnimg.cn/blog_migrate/29148bcc18a9951a42d2d73a65fca818.jpeg)
![38fb81caf7e08d0b34cda677b3994fd3.png](https://i-blog.csdnimg.cn/blog_migrate/d458d98b222c62f9faad0265f1f31d13.jpeg)
从图中我们可以看到,只有内容区域被渲染成了背景颜色,而内边距区域没有渲染成背景颜色。
总结
background-clip背景区域范围属性可以让我们实现,在外边距无法设置的情况下,需要设置不包括内边距的极端情况背景颜色渲染。如果没有background-clip属性,我们将需要两个div进行嵌套操作。