使用filter方式将图片设置为灰色
普通图片使用:
filter: saturate(0)
;
纯白图片使用:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 100px;height: 100px;}.box1 .img2 {filter: saturate(0);}.box2 .img4 {filter: brightness(0.6);}</style>
</head><body><div class="box1"><img class="img1" src="./img/图标-放大.svg" alt=""><img class="img2" src="./img/图标-放大.svg" alt=""></div><!-- 纯白 --><div class="box2"><img class="img3" src="./img/图标-缩小.svg" alt=""><img class="img4" src="./img/图标-缩小.svg" alt=""></div></html>