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>
相关推荐
草莓熊Lotso3 小时前
C++ 方向 Web 自动化测试实战:以博客系统为例,从用例到报告全流程解析
前端·网络·c++·人工智能·后端·python·功能测试
fruge3 小时前
Canvas/SVG 冷门用法:实现动态背景与简易数据可视化
前端·信息可视化
一 乐3 小时前
旅游|内蒙古景点旅游|基于Springboot+Vue的内蒙古景点旅游管理系统设计与实现(源码+数据库+文档)
开发语言·前端·数据库·vue.js·spring boot·后端·旅游
驯狼小羊羔3 小时前
学习随笔-require和import
前端·学习
excel3 小时前
🚀 从 GPT-5 流式输出看现代前端的流式请求机制(Koa 实现版)
前端
凸头3 小时前
Spring Boot接收前端参数的注解总结
前端·spring boot·后端
爱吃甜品的糯米团子4 小时前
JavaScript 正则表达式:选择、分组与引用深度解析
前端·javascript·正则表达式
excel4 小时前
Vue SSR 编译器源码深析:ssrTransformShow 的实现原理与设计哲学
前端
excel4 小时前
深入解析 Vue 3 SSR 编译管线:ssrCodegenTransform 源码全解
前端
excel4 小时前
深入解析 Vue SSR 编译器的核心函数:compile
前端