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

Question

Я использовал фон CSS на нескольких div, чтобы создать несколько кнопок большого формата. Он выглядит красиво, но кнопки создаются динамически, и их могут быть тысячи. Это означает ОГРОМНЫЙ динамический 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 (единственный бит, который изменяется) от остальной части кода?

BTW - Помещение только исходного URL-кода внутри скрипта не будет работать, оно игнорирует все свойства CSS в таблице стилей.

Заранее спасибо.

Answer 1

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

jQuery на помощь.
jsFiddle demo in action

Внутри ваш 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 изображения из любых данных, вы используете,> > внутри a data-* атрибут вашего сгенерированного элемента:

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

чем с помощью JQuery, замените это значение none со значением holded атрибутом data-bg:

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

Вот и все.
jQuery перестроит все фоновые слои для вас!