Javascript 在Div中为背景图像应用颜色

我正在开发网站，我面临着一个背景图像的问题。当我在谷歌上搜索时，我知道我可以做到：

.tinted-image {
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

但不知何故，我不能这样做：

.tinted-image { //Defining color and image differently
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
    background:
        url(image.jpg);
}

---

由于我的程序，我不能使用第一个代码，我必须以不同的方式定义背景颜色和图像（悬停和其他）。有没有第二种方法？或者我可以用Javascript实现这一点吗？

第二个后台声明将覆盖第一个后台声明。你要找的是背景图像和背景颜色

.tinted-image {
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

是完全有效的，只是缺少一些浏览器兼容性回退。如果你只希望它在鼠标上“着色”；这只是一个alpha混合覆盖而不是实际的色调，只需为它创建一个：hover伪

.tinted-image {
    background: 
        url(image.jpg);
}
.tinted-image:hover {
    background:
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

另一个完全可以接受的方法是使用嵌套的div来创建叠加效果

<div class="imgDiv">
  <div class="overlayDiv"/>
</div>

---

为什么不能使用第一个，第二个是不可能的，因为您不能附加值，它们只是替换为最后定义的值。我想在图像悬停时更改图像的色调。此外，我正在从

.xml

文件导入图像URL，因此我无法将URL硬编码到css中。无论哪种方式，您都在对URL进行“硬编码”，除非您是通过JS或类似方式创建css，在这种情况下，您也可以轻松创建整个类规则。只需创建一个处理.tinted图像的新类：hover[这看起来像你要找的东西][1][1]：@Clyde_Bigsby他在第一个示例中已经有了很多

线性渐变（rgba（255，0，0，0.45））

用于给图像着色，不给div上色。我认为用

背景色
给
背景图像上色是不可能的。没有区别，你所做的就是叠加背景，不影响图像的色调。是的，但是
线性渐变
定义了一个图像，因此，您不能将其用作
背景色
属性的值。@riv但您可以在嵌套的div中使用它，因为答案是您不需要在
覆盖IV
中使用图像。另外，您可能希望显式设置其大小，否则它的高度为0。第一次计数正确，我忽略了大小，因为在他的示例中他忽略了它，我假设他以某种方式隐式设置了它。
.imgDiv {
    background: 
        url(image.jpg);
}
.overlayDiv:hover {
    background:
        linear-gradient(rgba(255, 0, 0, 0.45));
}