php 生成纯黑白图片,使用CSS将彩色图片转换为黑白图片
通过使用过滤器我们能够不使用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的图片元素:
添加SVG filter效果
目前,CSS过滤器可以工作在Chrome 18+和Safari 6+的桌面和移动手机设备、Firefox 35+、Opera 15+,以及最新版本的Android和黑莓系统的浏览器上,IE的支持还处于开发状态。
为了在早期版本的Firefox浏览器中后的相同的效果,我们需要使用SVG过滤器。这里我们创建了一个单独的SVG文件:desaturate.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);
}
注意:以上方法对最新版本的IE浏览器是没有效果的,如果你想在所有浏览器上都达到同样的效果,做好使用js插件来实现这个效果,例如使用:Greyscale.js。
使用上面的方法,我们就可以使用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,#greyscale");
}
php 生成纯黑白图片,使用CSS将彩色图片转换为黑白图片相关推荐
- css样式里把背景设置为图片,利用css如何设置全屏背景图片
利用css如何设置全屏背景图片 如果你有一张比较绚烂的图片想做背景,可以这样设置,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 代码如下: body{ backg ...
- Android图片转换类 1. Bitmap去色,转换为黑白的灰度图, 2. Bitmap图片加圆角效果
/** * 处理图片的工具类. * */public class ImageTools { /***//** * 图片去色,返回灰度图片 * @param bmpOriginal 传入的图片 * @r ...
- 如何通过ps把彩色照片转换为黑白素描
1. 前言 在现实应用中,为了保持整体风格的一致,需要将各种风格的照片转换为黑白素描,如下图,而如何快速的转换呢?PS就这样. 2. 工具 Adobe Photoshop CS6 3. 转换过程 3. ...
- html表格图片垂直居中 css,利用Display: table;实现img图片垂直居中
html代码: CSS代码: .tablebox{width: 300px;height: 250px;bac公斤round: #fff;display: table} #imgbox{display ...
- 主题是计算机上的图片 颜色,如何在电脑中将彩色图片转换为黑白图片
this.p={ m:2, b:2, loftPermalink:'', id:'fks_0870710870830800670820870870700720840880700820800830750 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
- Baumer工业相机堡盟工业相机中彩色工业相机和黑白工业相机像素格式的区别和优点以及行业应用
Baumer工业相机堡盟工业相机中彩色工业相机和黑白工业相机像素格式的区别和优点以及行业应用 Baumer工业相机 Baumer工业相机的彩色和黑白成像的技术背景 Baumer工业相机的的彩色相机和黑 ...
- 不固定图片宽高瀑布流_类百度图片的固定高度横向瀑布流js方法及纯css实现的方法记录...
微信图片_20190117105118.png 纯css实现代码: Document div{ display: flex;/*显示模式设置为弹性盒子*/ flex-wrap: wrap;/*进行强制 ...
最新文章
- 计算机视觉技术 图像分类_如何训练图像分类器并教您的计算机日语
- 如何正确刷题计算机考研,2020考研:4个方法教你数学如何正确刷题!
- 阿里云esc云服务器IP不能访问的解决办法
- ios即时通讯客户端开发之-mac上安装MySQL
- Redis 工具类_慕课版本
- P2550 [AHOI2001]彩票摇奖
- java 输出字符集合里的字_Java基础 -- 字符串(格式化输出、正则表达式)(示例代码)...
- Domino学习笔记之邮件发送程序
- 《领域驱动设计精粹》DDD Domain-Driven Design Distilled -- Vaughn Vernon 读后感
- 大一C语言和线性代数,线性代数:对于编程很重要
- linux wps 数学符号,2016版WPS数学符号如何输入
- VMware ESXi 6.7 安装LEDE
- 假设web应用的文档根目录为MyApp,那么可以从哪里找到database.jar文件。
- netty 高匿ip检测_高匿代理ip不用担心被网站检测
- ImportError: No module named qbo_talk.srv
- 聊天机器人发展及应用技术解析
- ViewPager简单介绍(一)
- 三叶玫瑰线的膨胀(Mathematica演示)
- 正则表达式的相关操作和验证
- android静态代码扫描,Android 静态代码扫描流程及工具说明