使用CSS3编写灰阶滤镜来制作黑白照片效果的方法


Posted in HTML / CSS onMay 09, 2016

CSS3 中的滤镜(filter)功能让我们轻松方便简单的处理图片,而不需要使用 PhotoShop 或者使用很多 JavaScript、PHP 代码。这个属性已经得到比较新的 Firefox、Safari、Chrome 浏览器支持,而且我们可以通过综合的可替代的技术来模拟实现这个效果——甚至是 IE 浏览器。

本文中,我们将使用标准测试图片 Lena Söderberg (译者注:Lena 这张美女照片,被作为图片压缩的标准测试用图片)作为演示,使用 CSS 将其转换成黑白图片。在下面我将讲解如何使用 CSS 的这个功能实现调整色调、模糊、亮度、对比度和一些其他的效果。效果图:
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法

CSS3 的灰阶滤镜

使用 CSS3 来稀释一个图片的颜色,再简单不过了。我们可以把这个 CSS 语句写成一个类,这样遇到想要效果的图片,直接加上个类就可以了。

CSS Code复制内容到剪贴板
  1. img.desaturate { filter: grayscale(100%); }  

当然,当前的浏览器在使用 CSS3 的时候,要加上他们自己的浏览器功能实验性前缀,所以,我们首先要做的,就是写上浏览器的前缀:

CSS Code复制内容到剪贴板
  1. img.desaturate { filter: grayscale(100%);   
  2. -webkit-filter: grayscale(100%);   
  3. -moz-filter: grayscale(100%);   
  4. -ms-filter: grayscale(100%);   
  5. -o-filter: grayscale(100%);   
  6. }  

想要用在某个图片上很简单,加上一个类:

CSS Code复制内容到剪贴板
  1. <img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>  

这就可以了。 ## 增加一个 SVG 的滤镜效果 这个功能目前只在 Chrome 18+ 有效,其他浏览器马上就会增加支持。为了在 Firefox 4+ 中得到相同的效果,我们可以需要使用 SVG 滤镜。我把新建了一个单独的文件 的 saturate.svg ,代码如下:

CSS Code复制内容到剪贴板
  1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">   
  2. <filter id="greyscale">   
  3. <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0  
  4. 0.3333 0.3333 0.3333 0 0  
  5. 0.3333 0.3333 0.3333 0 0  
  6. 0  0  0  1 0"/>   
  7. </filter>   
  8. </svg>  

不要被这段 SVG 代码吓住了——虽然上面的矩阵数列有点复杂。这段代码我推荐你直接复制粘贴成一个通用的“小文件”。我会再写一篇文章详细介绍一下上面矩阵变化,在这里不再赘述。 加上上面的 SVG 文件引用,我们要插入 HTML 页面的 CSS 代码如下:

CSS Code复制内容到剪贴板
  1. img.desaturate{   
  2. filter: grayscale(100%);   
  3. -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
  4. -ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
  5. filter: url(desaturate.svg#greyscale);   
  6. }  

为 IE 做兼容:

到现在我们的代码可以兼容未来的浏览器,和最新版的 Chrome 、 Firefox 4+。为了让 IE 6-9 加入兼容列表,我们需要使用微软的笨拙但是有效的 filter 滤镜:

CSS Code复制内容到剪贴板
  1. img.desaturate{   
  2. filter: grayscale(100%);   
  3. -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
  4. -ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
  5. filter: url(desaturate.svg#greyscale);   
  6. filter: gray;   
  7. }  

如果你还想做老版本的 Webkit 内核浏览器的兼容:

CSS Code复制内容到剪贴板
  1. img.desaturate{   
  2. filter: grayscale(100%);   
  3. -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
  4. -ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
  5. filter: url(desaturate.svg#greyscale);   
  6. filter: gray;   
  7. -webkit-filter: grayscale(1);   
  8. }  

如果你想要在所有的浏览器中实现这个视觉效果(假设你的访问者都支持 JavaScript)你可以使用 jQuery 或者 Greyscale.js 来修改你的图片,使其去色。

上面咱们写的 CSS 代码可以让我们不需要使用 PhotoShop 就可以把图片变成黑白的。使用 CSS 来实现这个功能,可以非常容易修改:例如,你可以看到当我们把去色程度参数从 100% 变成 50% 的时候图片会是原色和黑白融合在一起的效果。

其他效果:

此外,黑白照片上还可以添加其他的一些filter的效果有:

CSS Code复制内容到剪贴板
  1. -webkit-filter:blur(5px);  //模糊,此处为5像素   
  2.   
  3. -webkit-filter:sepia(0.5);  //叠加褐色,取值范围0-1,此处表示50%的褐色   
  4.   
  5. -webkit-filter:brightness(0.5);  //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片)   
  6.   
  7. -webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜   
  8.   
  9. -webkit-filter:invert(1);  //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色   
  10.   
  11. -webkit-filter:saturate(4);  //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大   
  12.   
  13. -webkit-filter:contrast(2);  //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大   
  14.   
  15. -webkit-filter:opacity(0.8);  //透明度,取值范围0~1,0为全透明,1为原图   
  16.   
  17. -webkit-filter:drop-shadow(17px 17px 20px black); //阴影  

HTML / CSS 相关文章推荐
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 #HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 #HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 #HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 #HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 #HTML / CSS
CSS3过渡transition效果实例介绍
May 03 #HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 #HTML / CSS
You might like
php循环输出数据库内容的代码
2008/05/24 PHP
Symfony控制层深入详解
2016/03/17 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
jQuery事件对象总结
2016/10/17 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
应届生污水处理求职信
2013/11/06 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
旅游市场营销方案
2014/03/09 职场文书
英语故事演讲稿
2014/04/29 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
基层党支部整改方案
2014/10/25 职场文书
新年祝酒词大全
2015/08/11 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL