如何降低CSS中的图像亮度

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

回答:

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

#myimage {

filter: brightness(50%);

}

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

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

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

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

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

以上是 如何降低CSS中的图像亮度 的全部内容, 来源链接: utcz.com/qa/427136.html

回到顶部