背景クリップを使用しているように見えないのはなぜですか？

Question

background-clip: content-boxを使用しようとしても失敗しています。ボックス全体には、内容領域だけでなく、パディング領域も含まれます。

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

私が間違って何をしているのですか？

Answer 1

これは、CSSの短縮形プロパティを持つ一般的な問題点です。期待通りにあなたはそれがうまくいく、backgroundの下にあなたのbackground-clip宣言を移動した場合

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

：

background-clip is one of the properties that's set by the background shorthand propertyので、あなたのbackgroundスタイルは、暗黙のうちにあなたの明示的なbackground-clipスタイルをオーバーライドし、background-clip（初期値）border-boxに設定されます：

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の小さな変更。