Question

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

我的解决方案 - ＆gt;从所有background-image div类（.bg-image）获取url，将“setAttribute”设置为新的background-image标记。

   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列为标签，所以我认为尽管你使用了香草，但这是一个选择：

$(".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+")";

由于您无论如何都要将其添加为网址，因此无需使用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的东西就不重要了。

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

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

从现有的<div>获取背景图像网址和/或将另一个属性添加到背景图像

2 个答案: