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

Question

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

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

我做错了什么？

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

Answer 2

background CSS属性是一种定义所有背景属性的单行方式，包括background-clip。因此，指定background: #ddd会取消先前设置的background-clip。如果您用background-color: #ddd替换该行，它应该按您希望的方式工作。

Here's对你的jsfiddle的小修改。