当前位置主页 > 资料库 > 前端教程 > 使用CSS将彩色图片转换为黑白图片

使用CSS将彩色图片转换为黑白图片

04-10

查看演示 下载地址

通过使用过滤器我们能够不使用photoshop等图像软件或js、php等技术就可以进行各种图像处理。现在,CSS过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理效果,通过这种方法,即使是在IE浏览器中也能够正确的显示我们需要的图像效果。

在这篇文章中,我们将使用CSS滤镜来将一张彩色图片转换为黑白图片。

CSS greyscale 过滤器

我们不能简单的使用CSS来将彩色图片转换为黑白色,必须通过一个过滤器才能完成之一工作,如果想将一组图片进行转换,可以使用下面的CSS代码:

img.desaturate { filter: grayscale(100%); }                              
                            

Chrome 和 Safari浏览器在实现CSS过滤器时需要厂商前缀的支持,所以代码应该改为:

img.desaturate { -webkit-filter: grayscale(100%); filter: grayscale(100%); }                              
                            

CSS代码对应的HTML代码十分简单,就是一个带class的图片元素:

<img src="1.png" alt="..." style="width: 512px; height: 512px;" class="desaturate">                              
                            
添加SVG filter效果

目前,CSS过滤器可以工作在Chrome 18+和Safari 6+的桌面和移动手机设备、Firefox 35+、Opera 15+,以及最新版本的Android和黑莓系统的浏览器上,IE的支持还处于开发状态。

为了在早期版本的Firefox浏览器中后的相同的效果,我们需要使用SVG过滤器。这里我们创建了一个单独的SVG文件:desaturate.svg。它的代码如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="greyscale">
  <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>                              
                            

这个SVG的代码看起来有些复杂,它使用了颜色矩阵。关于颜色矩阵可以参考一下这篇文章:HTML5 SVG和CSS3炫酷液态菜单按钮特效

将这个SVG代码写在HTML页面中,然后就可以使用下面的CSS代码来使用它:

img.desaturate{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(desaturate.svg#greyscale);
}                              
                            
添加对IE浏览器的支持

为了使这个效果可以在IE6-9浏览器中使用,我们要使用IE浏览器专用的滤镜。

img.desaturate{
  -webkit-filter: grayscale(100%);
  filter: gray; 
  filter: grayscale(100%);
  filter: url(desaturate.svg#greyscale);
}                              
                            

如果你还想添加对旧版本的Webkit内核浏览器的支持,可以像下面这样:

img.desaturate{
  -webkit-filter: grayscale(1); 
  -webkit-filter: grayscale(100%);
  filter: gray; 
  filter: grayscale(100%);
  filter: url(desaturate.svg#greyscale);
}                              
                            

使用上面的方法,我们就可以使用CSS将彩色图片转换为黑白图片,而不需要使用图像编辑软件。使用CSS可以非常容易的改变图像,例如,在上面的CSS代码中,我们将百分比从100%降低为50%,就可以使图片的饱和度降低一半。

直接在CSS中使用SVG

我们还可以直接在CSS像图片一样引用SVG文件,将SVG文件从HTML文件中移除:

img.desaturate{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><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>#greyscale");
}                           
                            

查看演示 下载地址

Previous:
上一篇:CSS3制作各种平滑过渡的动画效果
Next:
下一篇:使用CSS制作怀旧风格的图片效果
返回顶部