用css3实现图片变灰

最新推荐文章于 2023-08-15 14:27:28 发布

ly_lv_hx

最新推荐文章于 2023-08-15 14:27:28 发布

阅读量3.1k

点赞数

分类专栏： CSS3 前端文章标签： css3 图片变灰滤镜 GrayScale

本文链接：https://blog.youkuaiyun.com/ly_lv_hx/article/details/8595043

版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

CSS3

0 篇文章

订阅专栏

本文介绍了如何在项目中将离线用户的头像变为灰色，主要探讨了两种方法：一是利用CSS3的滤镜功能，通过应用GrayScale滤镜轻松实现图片变灰；二是采用SVG技术，创建filters.svg文件并应用相关滤镜效果。

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

在实现项目中判断用户在线还是离线的过程中，需要将离线用户的头像变灰，经过在网上资料的查找，发现有三种方法。

第一，css3实现。

代码如下：

.gray{
-webkit-filter:grayscale(100%);
-o-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray;
}

此方法经测试后在firefox下没有效果。在IE和chrome下皆可实现效果。

第二，svg实现。

首先新建一个filters.svg文件，内容如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>


再在css中加上如下所示代码：

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
	
    filter: grayscale(100%);
    filter: url(filters.svg#grayscale);
	
    filter: gray;
}



第三，利用GrayScale.js插件实现。
首先引用js文件，<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>



然后调用grayscale(document.getElementById("thisImage"));即可。
但是此种方法不能用getElementByClass（），因此有所限制。
文章所有的内容都是参考http://www.zhangxinxu.com/wordpress/2012/08/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E9%BB%91%E7%99%BD%E7%9A%84/
谨以此来为自己所做的东西留下笔记