为 Div 中的背景图像应用颜色答案

【问题标题】：Applying Color for Background Image in Div为 Div 中的背景图像应用颜色
【发布时间】：2015-04-02 23:21:28
【问题描述】：

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

【问题讨论】：

为什么你不能使用第一个，第二个是不可能的，因为你不能附加值，它们只是用最后定义的值替换。
我想在图像悬停时更改图像的色调。另外，我正在从.xml 文件中导入图像 URL，因此我无法将 URL 硬编码到 css 中。
无论哪种方式，您都在“硬编码” url，除非您通过 JS 或类似方式创建 CSS，在这种情况下，您可以轻松创建整个类规则。只需创建一个处理 .tinted-image:hover 的新类
[这看起来像你要找的东西][1] [1]：stackoverflow.com/questions/8049276/…
@Clyde_Bigsby 他在他的第一个例子中已经有了这么多

标签： javascript html css

【解决方案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));
}

【讨论】：

您不需要overlayDiv 中的图像。此外，您可能需要明确设置它的大小，否则它的高度将为 0。
第一次计算是正确的，我忽略了 size 因为他在他的示例中忽略了它，我假设他以某种方式隐式设置它。

【解决方案2】：

第二个背景声明将覆盖第一个。您正在寻找的是背景图像和背景颜色。

【讨论】：

linear-gradient(rgba(255, 0, 0, 0.45)) 用于为图像着色，而不是为 div 着色。我认为不可能用background-color 为background-image 着色。
@Tetsudou 没有区别，你所做的只是叠加背景，不影响图像色调。
是的，但是linear-gradient 定义了一个图像，因此您不能将它用作background-color 属性的值。
@riv 但你可以在嵌套的 div 中使用它作为答案