8

カスケードを利用して、複数の背景画像の宣言で 2 番目の画像のみをオーバーライドするにはどうすればよいですか?

li2 つの背景画像 (子猫と右側の魚) を使用して、s の標準スタイルを指定しました。li.secondary2 つの背景画像のうち 2 番目のみを変更するスタイルも指定しました。

li { 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA/xX6fAAAA/ElEQVR42q2WYQ3DIBSE5wAJk1AJSKiESpiESakEJCChEpAwCW/vJSw0LPQoHMn3A0q5R7leeIjIFNo2JSm+Zz5DSAy6oLan8lKiIjV5fGu8u+TnrkfIKftpUQGks3Au8qNE6yOx1Sb/xPJYyH3EURW4QsHGZ5NB3K0dDpDwDvEZysAZvvP4znVpwTVcmrAgLsLX/yXhP+xfrOyuza00sbFZ7p5TAGlyYMF/J4axNClOvKKVJnEmTa6gpgkSM0Ca8HdITxOiSwuzLjVoAUAUxIWQBXESMQTpSWQd4r0GuxiJsZPII0F6EnUZg5hES7dZWEkExPj3GiDCv9d8AVEGli2R88rKAAAAAElFTkSuQmCC) repeat-y 90% center,
  #CCC url("http://placekitten.com/275/300") repeat right center;
  margin: 1em;
  padding: 1em;
  color: #FFF;
  font-weight: bold;
 }

li.secondary {
  background: #CCC url("http://placekitten.com/325/300") repeat left 10%;
}

JSFiddle: http://jsfiddle.net/KatieK/9zcnp/1/

しかし、新しい宣言によりbackground:、最初の背景画像 (魚) が吹き飛ばされます。カスケード ルールで 2 番目の背景画像のみを処理するにはどうすればよいですか?

4

3 に答える 3

7

残念ながら、カスケードの仕組みでは、各宣言で残りのレイヤーを繰り返さずに個々の背景レイヤーをオーバーライドすることはできません。

一般に、カスケードは宣言ごとに機能し、各宣言は正確に 1 つのプロパティと 1 つの値で構成されます。

/* Declaration */
property: value;

背景レイヤーのコンマ区切りリストは、カスケードの目的で単一の値としてカウントされます。これが、2 番目backgroundの宣言が最初の宣言を完全にオーバーライドする理由です。1

は他のいくつbackgroundかのプロパティの省略形ですが、独自のプロパティを持たないため、個々の背景レイヤーの省略形ではありません。個々のレイヤー プロパティが存在しないため、カスケードを使用して特定のレイヤーのみを上書きし、残りを維持することはできません。2

これが、レイヤー化された背景のプレフィックス付きグラデーションが非常に冗長で反復的である理由でもあります. 残念ながら、これは CSS 構文の制限であるため、CSS だけを使用して改善または回避するためにできることはあまりありません。

1これは、 のような省略形の宣言 が以前に宣言されたイメージを削除する理由と似ています(例1および2 )。background: #cccbackground-image

2 これに対する注目すべき例外は です。これはbackground-color、特定のボックスには背景色が 1 つしかなく、その背景色は常にそのレイヤーの画像の下にある一番下のレイヤーにペイントされるためです。ルール内の任意の場所で一度に 1 つの値に設定できbackground-color、他のレイヤーには影響しません。

于 2013-02-07T10:47:56.000 に答える
1

:before 疑似要素で解決しました。

http://codepen.io/lajlev/pen/DAyhn

.tile {
  position:relative;
  display: block;
  float: left;
  width: 100px; 
  height: 100px;
  margin: 30px;
  background: url('http://www.schaik.com/pngsuite/tbbn3p08.png') no-repeat;

  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: -1;
  }
}

.tile.last:before {
  background-color: green;  
}
于 2013-03-21T13:52:27.630 に答える
-1

明らかにそんなことはありません、複数の背景がbackground-image子孫を持たないプロパティを使用して設定されているbackground-image-1など。

ただし、一部の Javascript を使用してオーバーライドできます

于 2013-02-06T22:56:37.890 に答える