3

複数の div で CSS 背景を使用して、多数の大きな形式のボタンを作成しました。見た目は美しいですが、ボタンは動的に作成され、何千ものボタンが存在する可能性があります。これは巨大な動的 CSS スクリプトを意味します...各要素に同じプロパティを持つ異なる CSS 背景を与えるより良い方法はありますか?

コード例は次のとおりです - HTML:

<div id="ab_a" class="banner_button">           
     <h2>Title A</h2>`
</div>

<div id="ab_b" class="banner_button">       
     <h2>Title B</h2>`
</div>

<div id="ab_c" class="banner_button">           
     <h2>Title C</h2>`
</div>

など.... (これらは数千ある可能性があります)

CSS:

#ab_a {
      background: 
    linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.6)
    ),
    url(../images/bgimageA.jpg);
    background-size: cover;
    width: 100%;
    padding-bottom:37.01%;
    position: relative;
    float: left;
}
#ab_b {
      background: 
    linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.6)
    ),
    url(../images/bgimageB.jpg);
    background-size: cover;
    width: 100%;
    padding-bottom:37.01%;
    position: relative;
    float: left;
}
#ab_c {
      background: 
    linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.6)
    ),
    url(../images/bgimageC.jpg);
    background-size: cover;
    width: 100%;
    padding-bottom:37.01%;
    position: relative;
    float: left;
}

...動的 CSS ファイルでこのコード ブロックを何千回も繰り返す必要はありません。

バックグラウンド URL (変更される唯一のビット) を残りのコードから分離するにはどうすればよいですか?

ところで - スクリプト内に背景 URL をインラインで配置するだけでは機能しません。スタイルシート内のすべての CSS プロパティが無視されます。

前もって感謝します。

4

1 に答える 1

1

1 つの要素に複数の背景画像を使用する場合、残念ながら、純粋な CSS を使用して別のルールで 2 番目の背景画像を設定するには、前の背景レイヤーをすべて繰り返す必要があります。

救助へのjQuery。
動作中の jsFiddle デモ

CSS 内で 2 番目の背景を次のように設定しますnone。

.banner_button{

    background: linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.6)
    ), none  50% / cover;  /* notice the `none` for the second layer */

    width: 100%;
    padding-bottom: 37.01%;
    position: relative;
    float: left;
}

要素を作成するときは、使用するデータから目的の画像 URL を渡して生成するようにしてください。>>data-*生成された要素の属性内:

<div class="banner_button" data-bg="../images/whatever.jpg"></div>

jQuery を使用するよりも、そのnone値をdata-bg属性が保持する値に置き換えます。

$(".banner_button").css("backgroundImage", function(i, v){
  return v.replace("none", "url("+ $(this).data("bg") +")" );
});

それでおしまい。
jQuery が背景レイヤー全体を再構築します。

于 2015-05-09T13:12:30.900 に答える