css图片设为灰色

打印 上一主题 下一主题

主题 1733|帖子 1733|积分 5199

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

   普通图片利用:filter: saturate(0);
纯白图片利用:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         img {
  9.             width: 100px;
  10.             height: 100px;
  11.         }
  12.         .box1 .img2 {
  13.             filter: saturate(0);
  14.         }
  15.         .box2 .img4 {
  16.             filter: brightness(0.6);
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="box1">
  22.         <img class="img1" src="./img/图标-放大.svg" alt="">
  23.         <img class="img2" src="./img/图标-放大.svg" alt="">
  24.     </div>
  25.     <!-- 纯白 -->
  26.     <div class="box2">
  27.         <img class="img3" src="./img/图标-缩小.svg" alt="">
  28.         <img class="img4" src="./img/图标-缩小.svg" alt="">
  29.     </div>
  30. </html>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表