从现有的 <div> 获取背景图像 url 和/或向背景图像添加另一个属性

Question

我正在尝试使用线性渐变更新现有的背景图像。目前我的 CMS 正在创建背景图像，但我无法使用线性渐变更改不透明度。我只想使每个 CSS 的背景图像变暗。

我的解决方案 -> 从所有背景图像 div 类 (.bg-image) 中获取 url 以设置“setAttribute”一个新的背景图像标签。

   var elems = document.getElementsByClassName("bg-image");
    for (var i = 0, n = elems.length; i<n; ++i){
        var img = document.getElementsByClassName('bg-image')[i],
            bi = style.backgroundImage.slice(4, -1);

        img.setAttribute('style', 'background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5),url("' bi +'"));');};

Answer 1

您将 jQuery 列为标签，因此我认为尽管您使用的是 vanilla，但这是一个选项：

$(".bg-image").each({
    $(this).css({
        backgroundImage:"inear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5),"+$(this).css("backgroundImage"));
    });
});

没有 jQuery 解决方案：

如果你想要香草，你遇到的问题是bi = style.backgroundImage.slice(4, -1); 应该是bi = img.style.backgroundImage.slice(4, -1);。

另外，不要设置这样的样式

img.setAttribute('style', 'background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5),url("' bi +'"));')

改为使用

img.style.backgroundImage="linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5),url("+bi+")";

由于您无论如何都将其作为 url 添加回来，因此无需使用 slice 将其提取出来。此外，无需再次选择元素。

var elems = document.getElementsByClassName("bg-image");
for (var i = 0; i<elems.length; i++){
    var bi = elems[i].style.backgroundImage;
    elems[i].style.backgroundImage="linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5),"+bi;
}

Answer 2

您不需要 javascript。这是一个纯 CSS 解决方案：

原理是使用:before选择器并在其上添加样式。

显然，一些细节会根据内容在背景样式的 DOM 节点中的放置方式而有所不同，但如果需要，您可以使用 z-index 将内容放置在叠加层之上（或者，如果背景图片是用css设置的，你可以把它设置在#content:before，把rgba移动到#content，然后z-index的东西就没有关系了）。

运行下面的代码 sn-p 以查看它的实际效果（我使用了红色调，因此您可以看到它不仅仅是一张深色图像）。

#content {
  width: 400px;
  height: 200px;
  background: url("http://lorempixel.com/g/400/200/city/1/");
  position: relative;
  z-index: 1;
  color: white;
}
#content:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* you don't need a gradient with this method */
  background: rgba(255, 0, 0, 0.5);
}

<div id="content">
</div>