为什么我不能使用background-clip? [英] Why can’t I seem to use background-clip?
问题描述
我尝试使用 background-clip:content-box
失败。整个框都有背景,包括填充区域,而不仅仅是内容区域。
http://jsfiddle.net/alanhogan/7YjCV/6/
我做错了什么? p>
这是一个在CSS中具有速记属性的常用方法。
因为 background-clip
是背景
速记属性设置的属性之一,您的背景
样式是隐式设置到
border-box
(其初始值),覆盖您的显式剪辑
style:
background-clip:content-box;
background:#ddd none / * border-box * /;
如果您移动 background-clip
声明 background
下,它会正常工作:
background:#ddd none;
background-clip:content-box; 演示
My attempt to use background-clip: content-box
is failing. The entire box has a background, including the padding area, not just the content area.
http://jsfiddle.net/alanhogan/7YjCV/6/
What am I doing wrong?
解决方案 This is a common gotcha with shorthand properties in CSS.
Because background-clip
is one of the properties that's set by the background
shorthand property, your background
style is implicitly setting background-clip
to border-box
(its initial value), overriding your explicit background-clip
style:
background-clip: content-box;
background: #ddd none /* border-box */;
If you move your background-clip
declaration beneath background
, it'll work as expected:
background: #ddd none;
background-clip: content-box;
这篇关于为什么我不能使用background-clip?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!