使用CSS将图片转换成黑白(灰色、置灰)
来源:互联网 发布:淘宝客户回访好评软件 编辑:程序博客网 时间:2024/05/01 14:18
CSS3 greyscale 滤镜实现
如下测试代码:
.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
HTML代码:
<img src="mm1.jpg" /> <img src="mm1.jpg" class="gray" />
如果你手上的浏览器是Chrome18+, 您可以狠狠地点击这里:CSS3 greyscale 滤镜与照片黑白
可以看到类似文章一开始展示的黑白对比效果图。
其他些浏览器,如FireFox很快就会跟上实现。当然,要实现(比方说)FireFox 4浏览器上照片变黑白的效果,也是可以的。可以使用SVG的灰度滤镜效果。
SVG滤镜实现
我们新建一个空白文本文件,比如说:gray.txt
. 拷贝进去如下的XML代码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <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>
然后,修改后缀.txt
→ .svg
. 然后就可以调用了~~
如下CSS调用代码:
filter: url(gray.svg#grayscale);
然后,效果就出来了。如果你手上的浏览器是FireFox4+,您可以狠狠地点击这里:SVG滤镜实现照片黑白demo
别忘了IE浏览器
IE下实现上面已经提过,就是:
filter: gray;
至少IE7~9都是支持的。最近较懒,IE6懒得去测,支持与否不知。经验来看,应该是支持的。
我需要一个一统江山的方法
一统江山(完全兼容),如果单纯想通过CSS,也是可以的,你所要做的就是:天天拿个鱼竿去黄浦江钓鱼,年复一年,日复一日……然后,两年后,只要两年,把上面两个demo页面F5一下,就可以了!很简单吧!
如果嫌上面的做法过于伦敦,且你也不是一根筋,到是有个一统江山的方法,不过不是CSS的干货,一个貌似有点名气的Greyscale.js。
用法很简单,引用JavaScript文件,如下:
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
然后,一句话:
grayscale(document.getElementById("thisImage"));
或DOM元素集:
grayscale(document.getElementsByTagName("img"));
如果你喜欢使用jQuery,还可以使用:
grayscale($("#thisImage"));
0 0
- 使用CSS将图片转换成黑白(灰色、置灰)
- 使用CSS将图片转换成黑白(灰色、置灰)
- 使用CSS将图片转换成黑白(灰色、置灰)
- 使用CSS将图片转换成黑白(灰色、置灰)
- 使用CSS将图片转换成黑白(灰色、置灰)
- 使用CSS将网站、图片转换成黑白的…
- 彩色图,然后将其转换成灰色图到黑白图
- css将彩图置灰
- 图片转换成灰色图片
- 网站页面置灰:使用css+js对页面图片、flash、背景等置灰处理
- 将图片变成黑白
- css 图片变灰
- [整理].NET上传图片时,储存成灰色的图片(黑白)
- c# winform 把彩色图片转换为灰色的图片,变灰,灰度图片,速度很快,safe,unsafe
- CSS3 filter grayscale 将整个界面变为黑白灰色调
- 【图像处理】使用CImage类将彩色图像转换成8位灰色图像
- Java将图片转黑白
- c# 将图片变黑白
- Unix发展史
- UVa - 1587 - BOX
- 关于通讯的基本概念
- c++ 设计模式之策略模式
- 一个mybatis, spring mvc 与maven 的例子
- 使用CSS将图片转换成黑白(灰色、置灰)
- 开篇
- 绝对定位
- Swift元组
- 常用链接
- 自制摄像头+鱼眼镜头校正+极线校正+直接输出双目视频
- Xcode 8遇见新问题打印 subsystem: com.apple.siri等
- apktool下载地址
- Android Studio 使用JNI