css图片设为灰色

使用filter方式将图片设置为灰色

普通图片使用:filter: saturate(0);

纯白图片使用:

html 复制代码
<!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>
相关推荐
GreenTea8 小时前
GrokBot 核心成员 Lauren Tan:每月交付 2000 个 PR 的人,是怎么用 AI 的
前端·后端·架构
mCell9 小时前
用 Knip 清理 AI Coding 留下的冗余代码
前端·ai编程·前端工程化
笃行35010 小时前
使用Rokid AIUI做了一个童年推箱子游戏
前端
excel11 小时前
前端加密的作用与使用场景
前端
计算机魔术师12 小时前
纽约时报版权诉讼披露:微软高管内部称训练 AI 是人类历史上最大规模劳动窃取
前端
去伪存真12 小时前
大模型的参数量为什么那么大?
前端·人工智能
IT_陈寒12 小时前
Java空指针这次真把我坑惨了
前端·人工智能·后端
高级程序源13 小时前
django大学生创新创业项目管理系统94923-计算机课程设计、毕业设计
javascript·vue.js·spring boot·后端·python·django·课程设计
八荒启·交互动画14 小时前
# Web特效020—让 Web 特效真正动起来:时间循环应该怎么接
前端·webgl·网页特效·八荒启-交互动画·八荒启
动恰客流统计14 小时前
线下零售数字化浪潮下,客流统计的3个核心发展趋势
大数据·前端·人工智能