2011-09-15 11 views
2

Iを意味し、オーバーライドされたCSSプロパティがキャンセルされたか、またはオーバーライドされましたか?

私が行う場合:

#item { background:url('image.jpg');} 

し、別のスタイルシートで、私は

#item {background:red;} 

を行うには、ブラウザの負荷image.jpgでしょうし、それをCANCELLと赤のセット、または赤くまっすぐに行くでしょうか? (イメージをロードせずに)

ありがとう!

答えて

3

の詳細については、このページをチェックしてくださいそれは両方を行いますが、これらの二つの文はどちらの場合も

#item { background: red url('image.jpg'); } 

または

#item { background-color: red; } 
#item { background-image: url('image.jpg'); } 

と同じなので、背景がイメージを持っています、項目要素の全領域が赤で表示されます。したがって、透過性のある.pngのような不透明な画像は、透明な領域にも赤で塗りつぶされます。スクリプトは、カスケード方式でCSS、

#item { background: url('image.jpg'); } 
#item { background: url('anotherimage.jpg'); } 

を解析するよう

しかし、それは「anotherimage」をロードし、他のものを無視します。 CSSがコンパイルされ、specificityの順番が決定されるまで、リクエストは送信されません。つまり、最初のイメージはオーバーライドされ、したがって要求されません。

「背景」は実際には「境界」のような短い手のひらのプロパティで、すべての異なるプロパティを1つのステートメントにまとめます。 「背景」プロパティに関するlinkがあります。下にスクロールして、それについて読むことができます。

4

この特定の場合、ブラウザーはイメージをロードして同時に赤に適用する必要があります。これは、2つの定義が実際に重複しないためです。それは、属性「背景色」と「背景画像」を個別に設定するようなものです。大きな要素の残りの部分には背景画像と赤い背景があるので意味があります。

一般に、定義は、具体性と呼ばれるものに応じて、オーバーライドされます。そのhttp://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

関連する問題