2012-04-26 8 views
5

私はそれが透明値が何をするん背景:透明なURL();行う?

body { background: transparent url ('background.jpg') repeat scroll;} 

ようなものだったCSSコードを見ましたか?私はこれについてgoogle'ingを試みたが、助けがなかった。 background.jpgはそれを上書きしませんか?

ありがとうございます。

答えて

7

transparentは色です。要素は、背景イメージと背景色の両方を持つことができます。

上記と等価である:

body { 
    background-color: transparent; 
    background-image: url('background.jpg'); 
    background-repeat: repeat; 
    background-attachment: scroll; 
} 

例えばあれば色は、一般的に重要です背景画像が読み込まれない、または画像に透明領域が含まれている、または画像が領域全体を埋めるために繰り返されない(あなたの例ではそうではない)

background省略形を使用する場合、transparentが「初期値」であるため、省略形はすべて自動的に初期値に設定されるため、決して不要です。したがって

、背景色を含むようtransparentは理にかなってのみ使用事例:

  1. は速記を使用して、その代わりに直接background-colorプロパティを使用していません。
  2. これを使用して、その要素に直接適用される別のセレクタをオーバーライドします。

例は

body.foo { background-color: blue; } 
body.foo.bar { background-color: transparent; } 
+1

私はそれが正しいのではないかと恐れています。明示的に値を設定しても差はありません(私の答えを見てください)。 – user123444555621

+0

良いキャッチ@ Pumbaa80、私はそれが '継承'だと思った。修正する。 – Domenic

+0

@ Mr Resister、私は「固定」とは言いませんでした。 *今は*固定されています;) – Domenic

3

実際に、それが必要とされていないだろう。有効な宣言を考える

http://www.w3.org/TR/CSS21/colors.html#background
、「背景」プロパティは、最初の宣言で与えられた明示的な値を代入し、その後、それらの初期値にすべての個々の背景プロパティを設定します。より正確には

background:url(...);を設定するときに

background-colorの初期値is transparentので、それは暗黙的に適用され、あなたのスタイルルールは、どちらの場合も

background-color: transparent; 
background-image: url(...); 
background-repeat: repeat; 
background-attachment: scroll; 
background-position: 0% 0%; 

に相当します。

はしかし、(私を含め)多くの著者は、明示的に値、彼らがより良い を知らないので、任意のブラウザのバグ、または単に

  • を防ぐために、読みやすさ
  • ため

    • を設定することを好みます