Изменение фона на элементе с несколькими фоновыми изображениями

Я использовал 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;
}

...Я не хотите повторить этот блок кода 1000 раз в динамическом CSS-файле.

Как я могу отделить фоновый url (единственный бит, который изменяется) от остальной части кода?

Кстати-установка только фонового url-адреса в скрипте не будет работать, он будет игнорировать все свойства CSS в таблице стилей.

Заранее благодарю.

1 2
css background responsive-design dynamic-css

1 ответ:

Использование нескольких фоновых изображений на одном элементе, к сожалению, нет способа с помощью чистого CSS установить второе фоновое изображение в отдельном правиле , не повторяя все предыдущие фоновые слои.

JQuery спешит на помощь.
демо jsFiddle в действии

Внутри вашего CSS установите второй фон на 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 восстановит все фоновые слои для вас!

1