利用CSS样式中的 filter 属性可以设置图片元素的可视效果,再配合使用 brightness() 来调整图片的亮度,就可以实现图片元素变暗的效果。

CSS实现图片变暗的方法

示例代码:

<!--正常图片-->
<img src="https://www.feiniaomy.com/zb_users/upload/2018/07/201807301532943742383695.jpg" />
<!--图片变暗-->
<img style="filter: brightness(0.75);" src="https://www.feiniaomy.com/zb_users/upload/2018/07/201807301532943742383695.jpg" />
<!--图片变暗-->
<img style="filter: brightness(50%);" src="https://www.feiniaomy.com/zb_users/upload/2018/07/201807301532943742383695.jpg" />
<!--图片变暗-->
<img style="filter: brightness(30%);" src="https://www.feiniaomy.com/zb_users/upload/2018/07/201807301532943742383695.jpg" />

示例代码:

CSS实现图片变暗的方法