将图片转换成黑白(灰色、置灰)

网站图片置灰现在已经很常见了,最近上网找了些资料,基本都是用css3 grayscale和grayscale.js,做了测试,发现用CSS或greyscale.js都不能完全兼容。

测试浏览器版本:google、google、firefox、opera、safari、IE7-9

css3 grayscale很多都是用这段CSS:

            -webkit-filter: grayscale(100%);/*兼容google、opera*/
            -moz-filter: grayscale(100%);/*FF下不生效*/
            -ms-filter: grayscale(100%);/*IE下不生效*/
            -o-filter: grayscale(100%);/*opera下不生效*/

            filter: grayscale(100%);

            filter: gray;/*兼容IE7-IE9,IE10不支持*/

测试结果如上面代码注释所示

自己做了一番测试。先不废话,上代码和测试结果:

1.方法1:CSS3 grayscale滤镜实现。

    只兼容google、opera、IE7-9

代码:

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
        .gray {
            -webkit-filter: grayscale(100%);/*兼容google、opera*/            filter: gray;/*兼容IE7-IE9,IE10不支持*/
        }
    </style>
</head>
<body>
    <img src="button.png" class="gray">
</body>
</html>

注意:要在需要变灰的img上加上类gray,再在.gray{}中写CSS。不能把CSS写在html{}中(因为在IE7-9中不支持).例如下面所示:

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
        html{
            -webkit-filter: grayscale(100%);/*兼容google、opera*/
            filter: gray;/*兼容IE7-IE9,IE10不支持*/
        }
    </style>
</head>
<body>
    <img src="button.png" class="gray">
</body>
</html>

2.方法2:只使用grayscale.js

    只兼容google、opera、safari、firefox、IE9-10。   IE7-8不兼容!

代码:

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <img src="button.png" class="gray">
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/grayscale.js"></script>
<script type="text/javascript">
    $(function(){
        grayscale(document.getElementsByTagName("img"));
    });
</script>
</html>

grayscale.js的下载地址:

http://www.bvbcode.com/cn/e0nx8py7-890221

综上所述:

结合第1种的CSS和第2种的grayscale.js使用,就可以兼容主流浏览器。我只测试了:google、firefox、safari、opera、IE7-10。

完整代码:

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css">
        .gray {
            -webkit-filter: grayscale(100%);/*兼容google、opera*/
            filter: gray;/*兼容IE7-IE9,IE10不支持*/
        }
    </style>
</head>
<body>
    <img src="button.png" class="gray">
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/grayscale.js"></script>
<script type="text/javascript">
    $(function(){
        grayscale(document.getElementsByTagName("img"));
    });
</script>
</html>

如有其他更好方法,欢迎留言讨论。

时间: 2024-11-06 09:41:28

将图片转换成黑白(灰色、置灰)的相关文章

小tip: 使用CSS将图片转换成黑白(灰色、置灰) ? 张鑫旭-鑫空间-鑫生活

小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕

小tip: 使用CSS将图片转换成黑白(灰色、置灰)

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能. CSS3 greyscale 滤镜实现 如下测试代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter:

使用CSS将图片转换成黑白(灰色、置灰)

CSS3 greyscale 滤镜实现 效果如下: 用滤镜实现hover 效果. //dom节点 <img class="filter" src="img/index/hx2.png"> css设置图片滤镜为灰色 .filter{ filter: grayscale(100%);} 用jq实现hover效果 $(".filter").hover(function() { $(this).css('filter','grayscale(

android 将图片转换成黑白图片

先调用android的系统工具,获取图片生成bitmap文件,再使用android中的二值化技术,将图片转化成黑白图片,主界面代码: package com.example.blackwhite; import java.io.IOException; import android.media.ThumbnailUtils; import android.net.Uri; import android.os.Bundle; import android.provider.MediaStore;

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

如何将dwg文件转换成黑白jpg图片

在CAD日常的工作中,我们经常见到的就是dwg格式的文件,但是dwg格式的文件不方便我们进行查看CAD图纸,所以有时候需要将dwg格式的文件转换成jpg格式的,如果我们想要将dwg文件转换成黑白jpg图片,具体应该怎么进行转换?如何将dwg转换成黑白jpg图片?下面小编就教教大家在迅捷CAD编辑器标准版中如何将dwg文件转换成黑白jpg图片. 第一步:在浏览器中搜索CAD编辑器,进入迅捷官网,点击下载安装,然后双击打开CAD编辑器,进入到软件的操作界面. 第二步:软件打开之后,点击编辑器界面上方

如何将CAD图纸文件转换成黑白的图片?

如何将CAD图纸转换成黑白的图片?在日常的工作中,特别是在CAD行业,每天在日常不过的事情就是绘制图纸,但是在绘制CAD图纸的时候建筑设计师们都是根据客户的需求来进行绘制的,所以在每编辑完一张CAD图纸都需要交给客户进行查看,如果在给客户的时候,如何将CAD图纸文件转换成黑白的图片?巨涛要怎么来进行操作?有什么好的办法吗?下面小编就来教教大家在迅捷CAD编辑器中如何将CAD图纸文件转换成黑白的图片?想要了解的朋友就一起来看看吧. 使用步骤一:首先打开电脑,在电脑桌面上任意的打开一个浏览器,在浏览

如何使用转换器将接收到的多张CAD图纸转换成黑白TIFF格式?

如何使用转换器将接收到的多张CAD图纸转换成黑白TIFF格式? TIFF格式是图片的一种, CAD图纸绘制好之后有时会根据需要将其转换成图片文件来方便查看.那么在转换的时候,如何将CAD图纸转换成彩色或黑白的图片,下面要来教大家的就是如何使用转换器将接收到的多张CAD图纸转换成黑白TIFF格式应怎样操作,希望能够帮助到你们! 步骤一:首先需要打开你们电脑上面的CAD转换器软件,如果你们电脑上没有这款软件的话,您们就可以去到迅捷CAD官网上面进行下载安装了,小编使用的就是这款"迅捷CAD转换器&q

照片转成pdf 如何把jpg图片转换成pdf格式

大家不知道还记不记得,那句台词"好男人就是我,我就是xxx"曾小贤.没错就是他<爱情公寓>毫无疑问近几年比较有特点的喜剧了,而且每个人都在盼望着第五季.尤其是到第四部结尾的时候,大家都希望曾小贤能和一菲在一起,在这时候它结束了,我们都幻想着爱情公寓第五季,可是迟迟没有音信.大家依然还记得子乔的小姨妈.楼下的小黑.婉瑜.展博. 这群年轻人跟现实生活中的我们一样,过着合租群租的生活,我们没有他们那么多的欢声笑语,可能这就是电视剧和现实差距,当我们最爱的几位主演都有了自己新的工作