使图像更暗，背景色

Question

我有一个图像，我想使用rgba背景变暗，但我似乎无法让它工作。图像的颜色不会改变。

这里是html的样子：

<div class="image">

<div class="darker">
<img src="url">
</div>

</div>

和css：

.image {
 width: 100%
 height: 100px;
 position: relative;

 }

.darker {
 background-color:rgba(255,0,0,0.5);      

 }

Answer 1

将您的HTML代码更改为：

<div class="image">
    <img src="..." />
    <div class="darker"></div>
</div>

使用CSS将.darker div放在图像上。然后你可以使用不透明度“使它变暗”：

.image { position: relative; }
.darker { position: absolute; top: 0px; left: 0px; background-color: #000; opacity: 0.5; width: 100%; height: 100% }