Javascript 从现有图像获取背景图像url<；部门>；和/或向背景图像添加另一个属性

我试图用线性梯度更新现有的背景图像。目前，我的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 +'"));');};

var elems=document.getElementsByClassName（“bg图像”）；
对于（var i=0，n=elems.length；i您将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+")";

而且，由于您无论如何都要将其添加回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;
}

var elems=document.getElementsByClassName（“bg图像”）；
对于（var i=0；i您不需要javascript。下面是一个纯CSS解决方案：

原则是使用
：before
选择器并在其上设置样式

显然，一些细节会根据内容在后台样式的DOM节点中的放置方式而有所不同，但如果需要，可以使用
z-index
将内容放置在覆盖层之上（或者，如果背景图像是用css设置的，您可以将其设置为
#content:before
，将
rgba
移动到
#content
，然后z索引就不重要了）

运行下面的代码片段以查看它的实际操作（我使用了红色，这样您就可以看到它不仅仅是一个黑色的图像）


#内容{
宽度：400px；
高度：200px；
背景：url（“http://lorempixel.com/g/400/200/city/1/");
位置：相对位置；
z指数：1；
颜色：白色；
}
#内容：以前{
内容：“；
位置：绝对位置；
z指数：1；
排名：0；
底部：0；
左：0；
右：0；
/*这种方法不需要渐变*/
背景：rgba（255,0,0,0.5）；
}

你也可以发布你的html吗？你可以在一个新的css文件中覆盖.bg image类，对吗？你根本不需要使用jquery或javascript，你需要js吗？@JeremyC。它不适用于：before或其他css内容。你试过重要的东西吗？什么“不起作用”意思是？你能拼凑一把小提琴吗？它在代码段中有效吗？对不起，我的英语很好。CSS解决方案在我的CMS中不起作用。它可能因为服务器端脚本或smth而超出我的控制。当我说“这是什么意思？”时，不要担心你的英语。我的意思是，“你能解释一下它以什么方式不起作用吗？”。“不起作用”并没有告诉我任何关于这个问题的信息，一个纯css解决方案会更好（这是css做这类事情的目的）。