本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
上一篇文章中我们了解了将背景图像固定在视口的方法,请看《巧用css将背景图像固定在视口》。这次我们来了解一下规定背景绘制区域的方法,有需要的可以参考参考。当我们对背景有其他要求的时候,应该怎么去做呢?
首先来看一个小例子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
这个小例子的结果是
我们可以看到这个例子里背景颜色并没有将这个盒子完全填充,这是怎么回事呢?回头去看看代码,原来我们使用了background-clip:content-box;
。
那我们就来看一个这个属性吧。
background-clip
属性规定背景的绘制区域,它设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
如果没有设置背景图片(background-image
)或背景颜色(background-color
),那么这个属性只有在边框(border
)被设置为非固实(soild
)、透明或半透明时才能看到视觉效果(与border-style
或border-image
有关),否则,本属性产生的样式变化会被边框覆盖。
在这个属性的值有四个,分别是border-box
、padding-box
、content-box
和text
。其中border-box的意思是背景延伸至边框外沿(但是在边框下层);padding-box的意思是背景延伸至内边距(padding)外沿。不会绘制到边框处;content-box的意思是背景被裁剪至内容区(content box)外沿;text的意思是背景被裁剪成文字的前景色。
推荐学习:css视频教程
以上就是巧用css规定背景绘制区域的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者