更改具有多个背景图像的元素的背景

Question

我在多个 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 文件中重复此代码块 1000 次。

如何将背景 url（唯一发生变化的部分）与其余代码分开？

顺便说一句 - 仅将背景 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，>> 在您生成的元素的 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将为您重建整个背景图层！

更改具有多个背景图像的元素的背景

Change background on element with multiple background images

css

background

dynamic-css

responsive-design