w3h5

利用CSS设置图片黑白/灰色效果

写页面的时候由于页面风格原因,可能需要图片变灰色,如果用图片处理软件的话可能会比较麻烦,而且会增加图片的数量,不利于资源的合理利用。

下面提供两种方法:

1、使用CSS的 filter: gray;  属性即可实现灰度效果。

Chrome内核的浏览器只需要一行属性代码即可:

filter: grayscale(100%);

HTML部分代码:

<img src="img/qingxin.png" alt="">
<img class="g" src="img/qingxin.png" alt="">

为了形成对比,我把图片引入两次,其中一个添加了一个class g ,用来给它设置样式。

CSS部分代码,为了保证兼容性,可以写成:

img {
  width: 300px;
}
.g {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

首先给图片设置一个宽度,再给其中一个设置灰度属性。

效果如下:

 利用CSS设置图片黑白/灰色效果 经验总结

<body> 标签添加属性,可以实现整站变灰效果。

网上说的其中的 filter: gray; 就是兼容IE的,不过我试着好像不行,可以使用第二种方法。

2、利用 grayscale.js 实现图片的灰度效果。方法很简单:

a. 引入js文件:

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

但是这个链接好像被墙了。。。可以引入我网站的链接:

<script src="http://cdn.w3h5.com/down/source/js/grayscale.js"></script>

您可以直接下载 js 文件引入 下载链接:点击下载 grayscale.js

在 script 标签内添加一行:

grayscale(document.getElementById("g"));//通过ID调用

或DOM元素集:

grayscale(document.getElementsByTagName("img"));

也可以使用JQuery调用:

grayscale($("#g"));

需要注意的是:

Grayscale.js 是模仿微软专有的“ 灰度 ”过滤器的实验性尝试(在大多数IE版本中都可用)。在Opera 9,FF2 / 3,Safari 4,IE6 / 7中测试可用。

它可能不适用于Safari 4和Chrome,因为它们不支持 CanvasContext.getImageData(因为图像不能灰度化)。


实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换~~

因此,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:

1. 速度:300*300这张一般般大小的图片变灰就要数秒之久;

2. 跨域:安全性机制,无法转换跨域的图片为黑白色。


赞 (1)
分享到: +More |

评论 沙发

换个身份