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

Question

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

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

我究竟做错了什么？

Answer 1

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

因为background-clip是由background速记属性设置的属性之一，所以您的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 演示

Answer 2

CSS 属性是一种定义所有背景属性的background单行方式，包括. 因此，指定取消设置您之前的. 相反，如果您将该行替换为，它应该按照您希望的方式工作。background-clipbackground: #dddbackground-clipbackground-color: #ddd

这是对您的 jsfiddle 的小修改。