如何在图像上设置颜色？

Question

我想在下面这样的图像上设置一层透明的黑色。在很多方面都有。但没有什么对我有用。我可以用CSS做吗？

HTML：

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

CSS：

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

Answer 1

您可以通过将图像覆盖在具有所需颜色的元素上，然后设置图像的不透明度来实现相同的效果。

CSS：

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

HTML：

display: table

请注意1 - x。这会导致div仅增长到其内容的大小，这正是我们想要的叠加效果 将图像的不透明度设置为x，其中0.7是所需叠加层的不透明度。例如，如果您想要30％不透明黑色叠加层，请将图像的不透明度设置为SELECT * FROM UnaData AS Una FULL OUTER JOIN GCData AS GC ON GC.[Bill Rate] = Una.[Bill Rate] AND GC.[Employee Name] = Una.username AND GC.Revenue = Una.[Bill Rate] * Una.[Hours] AND GC.[Contract Number] = Una.[Project Code] AND GC.[Job Category] = Una.[Cost Element] AND GC.[Hours Billed] = Una.[Hours] WHERE Una.username IS NULL OR GC.[Employee Name] IS NULL ORDER BY Una.[Project Code] 。

看看这个小提琴，看看它的实际效果：https://jsfiddle.net/145h44um/