css - background-clip を使用できないように見えるのはなぜですか?

Question

使用しようとしてbackground-clip: content-boxも失敗します。コンテンツ領域だけでなく、パディング領域を含むボックス全体に背景があります。

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

私は何を間違っていますか？

Answer 1

これは、CSS の省略形プロパティに関するよくある落とし穴です。

は省略形の propertybackground-clipによって設定されるプロパティの 1 つである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を 1 行で定義する方法です。したがって、 を指定すると、 の以前の設定が解除されます。代わりにその行を に置き換えると、希望どおりに機能するはずです。background-clipbackground: #dddbackground-clipbackground-color: #ddd

これがあなたのjsfiddleへの小さな変更です。