如何在图像上设置颜色？

Question

我想在下面的图像上设置一层透明的黑色。以许多方式做了尝试。但没有为我工作。我可以使用CSS吗？

HTML：

<img src="images/slider1.jpg" alt="slider1" /> 

CSS：

img { 
    height: 634px; 
    width: 100%; 
} 

Answer 1

您可以用您想要的颜色元素的叠加图像，然后设置达到相同的效果图像的不透明度。

CSS：

#image { 
    opacity: 0.5; 
} 

#container { 
    background-color: black; 
    display: table; 
} 

HTML：

<div id="container"> 
    <img src="http://i.stack.imgur.com/kmA5H.jpg" alt="slider1" id="image" /> 
</div> 

注意display: table。这会导致div只增长到其内容的大小，这正是我们想要的叠加效果。
将图像的不透明度设置为1 - x，其中x是所需叠加层的不透明度。例如，如果您想要30％不透明的黑色覆盖图，请将图像的不透明度设置为0.7。

看看这个小提琴看到它在行动：https://jsfiddle.net/145h44um/