在Div中应用背景图像的颜色

我正在开发this网站，我正面临背景图像的问题。当我在谷歌上搜索，我意识到，我可以这样做：在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实现这一点？

来源

2015-04-02 Tetsudou

你为什么不能使用1次，第2次是不可能的，因为你不能追加值，他们只是取代最后定义的值。 – Wobbles 2015-04-02 14:54:15

我想在图像悬停时更改图像的色调。此外，我从'.xml'文件导入图像URL，因此我无法将网址硬编码到CSS中。 – Tetsudou 2015-04-02 14:55:53

除非您通过JS或类似方式创建CSS，否则您会以任何方式“硬编码”url，在这种情况下，您可以轻松创建整个类规则。只是使处理.tinted像一个新的类：悬停 – Wobbles 2015-04-02 14:59:18

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

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

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

来源

2015-04-02 15:08:27 Wobbles

'overlayDiv'中不需要图像。此外，你可能想明确地设置它的大小，否则它会有0高度。 – riv 2015-04-02 15:14:35

正确处理第一个计数，并且因为他在示例中遗漏了数据而留下了大小，我假定他以某种方式隐式设置它。 – Wobbles 2015-04-02 15:22:13

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

来源

2015-04-02 14:54:42 Matt

'linear-gradient（rgba（255，0，0，0.45））'用于为图像着色，而不是着色div。我不认为有可能用'background-color'给背景图像着色。 – Tetsudou 2015-04-02 14:59:01

@Tetsudou没有区别，你所做的只是叠加背景，而不影响图像的色调。 – Wobbles 2015-04-02 15:03:21

是的，但'linear-gradient'定义了一个图像，所以你不能用它作为'background-color'属性的值。 – riv 2015-04-02 15:04:11

在Div中应用背景图像的颜色

回答

相关问题