如何使用CSS为图像添加低调（黑色，透明叠加）效果？

Question

我想让图片看起来有点透明？我真的不知道如何描述它，但就像你可以在上面写文字而图像在后面。

这可以用css或javascript或任何其他语言吗？

Answer 1

您可以在图像上添加一个遮罩，如下所示：

HTML：

<div>
<img scr="yourImage.jpg" alt="" />
<div class="mask"></div>
</div>

的CSS：

.mask{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}

Answer 2

我认为你需要的是一个css过滤器。

对于最新的浏览器，请查看使用以下内容的these examples：

img {
   -webkit-filter: brightness(20%);
    filter:brightness(20%);
}

对于旧版浏览器，请查看使用以下内容的these examples：

img {
    opacity: 0.3;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}