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次。

如何将背景网址（唯一更改的位）与其余代码分开？

顺便说一句 - 只在脚本中内嵌背景网址将无效，它将忽略样式表中的所有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; }

在创建元素时，请务必生成它们，从您使用的任何数据中传递所需的图片网址，＆gt;＆gt;在生成元素的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 个答案: