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

Question

我正在开发 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 实现吗？

Answer 1

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