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

Question

我想让一张图片看起来有点透明？我不太知道怎么描述，但是就像你可以在上面写字，而图片就在后面。

这个效果可以用CSS、JavaScript或其他语言实现吗？

- Kat

---

在CSS规则中使用opacity和一个覆盖在图像上的div，这很容易实现。 - Roljhon

你想让它看起来像是部分透明，还是你想让它真的部分透明？ - David Thomas

请查看此链接（https://dev59.com/p2s05IYBdhLWcg3wJurp），可以获得许多其他效果。 - Md.Shahjalal

Answer 1

我认为你需要的是CSS滤镜。

最新的浏览器可以查看这些例子，它们使用：这些示例。

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

对于较老的浏览器，请查看这些示例，其中使用了：

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

- Matthew Cawley

---

但这种方法似乎也会降低我放在图像上的文本的亮度，对此有什么不影响文本颜色的方法吗？ - Kat

这段文字是图片本身的一部分还是你将文字放在一个独立的标签中并将其定位在图片上方？前者不起作用，但后者可以。只需确保文字不嵌套在img标签内即可。 - Matthew Cawley

Answer 2

你可以像下面这样在图像上添加蒙版：

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);
}

- creativenitish

---

你也可以像Matthew Cawley提到的那样设置不透明度。(我的意思是应用两种效果并设置理想值...) - S.Serpooshan