CSS控制，彩色图片变灰色

最新推荐文章于 2025-06-26 13:57:29 发布

原创最新推荐文章于 2025-06-26 13:57:29 发布 · 9.3k 阅读

2 ·

CC 4.0 BY-SA版权

HTML+CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片灰度显示的方法，并通过调整透明度来控制灰度效果的深浅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <style>
    .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    opacity:0.7;//通过改变透明度来调节灰色的程度
}
    </style>
  <img width="36" src="img/back.png" class="gray">