利用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" />
示例代码: