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

我正在开发this网站，但遇到背景图像问题。在谷歌搜索时，我了解到可以做到这一点：

.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>

--

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