如何在圖像上設置顏色？

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/