css - 为什么我似乎不能使用背景剪辑？

Question

我尝试使用 background-clip: content-box 失败了。整个框都有背景，包括填充区域，而不仅仅是内容区域。

http://jsfiddle.net/alanhogan/7YjCV/

我做错了什么？

Answer 1

这是 CSS 中速记属性的常见问题。

因为 background-clip is one of the properties that's set by the background shorthand property ，您的 background 样式隐式地将 background-clip 设置为 border-box (其初始值)，覆盖您显式的 background-clip 样式:

background-clip: content-box;
background: #ddd none /* border-box */;

如果您将 background-clip 声明移动到 background 下方，它将按预期工作:

background: #ddd none;
background-clip: content-box;

jsFiddle demo