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

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

顺便说一句 - 仅将背景 url 内联在脚本中是行不通的，它将忽略样式表中的所有 CSS 属性。

提前致谢。

4

1 回答 1

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 将为您重建整个背景层！

于 2015-05-09T13:12:30.900 回答