6

次のようなCSSコードを見ました

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

透明な値は何をしますか? 私はこれについてググってみましたが、助けにはなりませんでした。background.jpg はそれをオーバーライドしませんか?

ありがとうございました。

4

2 に答える 2

8

transparentは色です。要素は、背景画像と背景色の両方を持つことができます。

上記は次と同等です。

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

たとえば、背景画像の読み込みに失敗した場合、または画像に透明な領域が含まれている場合、または画像が領域全体を埋めるために繰り返されない場合（これは確かにあなたの例には当てはまりません）、一般的に色は重要です。

ただし、は「初期値」であるため、省略形transparentを使用する場合は必要ありません。短縮形はすべての未指定のプロパティを自動的に初期値に設定するためです。background

したがって、transparent背景色として意味のある唯一の使用例は次のとおりです。

  1. 省略形を使用するのではなく、background-colorプロパティを直接使用します。
  2. それを使用して、その要素に直接適用される別のセレクターをオーバーライドします。

例は

body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }
于 2012-04-26T06:22:16.950 に答える
3

実際には、必須ではありません。

http://www.w3.org/TR/CSS21/colors.html#background
有効な宣言が与えられると、'background' プロパティは最初にすべての個々の背景プロパティを初期値に設定し、次に宣言で指定された明示的な値を割り当てます。

background-colorの初期値はtransparentであるため、設定時に暗黙的に適用されます。background:url(...);

より正確には、スタイルルールは次と同等です

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

両方の場合において。

ただし、多くの作成者 (私を含む) は、値を明示的に設定することを好みます。

  • 読みやすさのために
  • ブラウザのバグを防ぐため、または単に
  • 彼らはよく知らないから
于 2012-04-26T06:31:01.017 に答える