如何降低CSS中的图像亮度

Question

我想降低CSS中的图像亮度。我进行了很多搜索，但所能获得的只是关于如何更改不透明度的信息，但这会使图像更明亮。谁能帮我 ？

Answer 1

您要寻找的功能是filter。它能够执行多种图像效果，包括亮度：

#myimage {
    filter: brightness(50%);
}

注意，这只是最近才成为CSS的功能。它是可用的，但大量的浏览器在那里将不会支持它，和那些支持它需要供应商名称（即-webkit-filter:，-moz-filter等）。

也可以使用SVG进行这样的滤镜效果。SVG对这些效果的支持已经建立并得到广泛支持（CSS过滤器规范摘自现有SVG规范）

还要注意，不要将它与filter旧版本的IE中可用的专有样式相混淆（尽管我可以预测到，当新样式删除其供应商前缀时，名称空间冲突会引起问题）。

如果这些都不适合您，您仍然可以使用现有opacity功能，但不能使用您想的方式：只需创建一个纯黑色的新元素，将其放在图像上，然后使用淡化opacity。效果将是变暗的图像。

最后，您可以在filter 此检查浏览器支持。