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

Posted 2023-02-23

【中文标题】如何使用 CSS 为图像添加低调（黑色、透明叠加）效果？

【英文标题】：How to add low-key (black, transparent overlay) effect to image using CSS?

【发布时间】：2017-06-14 05:25:08

【问题描述】：

我正在尝试使图像看起来有点透明？我真的不知道如何描述它，但它就像你可以在上面写文字并且图像在后面。

这对于 css 或 javascript 或任何其他语言是否可行？

【问题讨论】：

在 CSS 规则不透明度和使用 div 覆盖图像方面非常简单

您希望它看起来像部分透明，还是希望它部分透明？

看到这个link获得许多其他效果

【参考方案1】：

我认为你需要的是一个 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 */

【讨论】：

但是这样也会降低我放在图像上的文字的亮度，对吧？有什么办法不影响文字颜色？

是图像本身的文本部分，还是您将文本放在单独的标签中并将其定位在图像上？第一个不起作用，但后者会。只要确保文本没有嵌套在 img 标签内即可。

【参考方案2】：

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

html:

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

css:

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

【讨论】：

您也可能更喜欢设置不透明度，如 Matthew Cawley 所述。 （我的意思是用理想的值应用这两种效果......）