css图⽚变⿊⽩效果使⽤CSS将图⽚转换成⿊⽩的
可能早就知道，像汶川这种糟糕的⽇⼦⽹站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是⽆解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“⿊⽩效果”⼤规模应⽤于实际的可能。
CSS3 greyscale 滤镜实现
如下测试代码：
复制代码
代码如下:
svg canvas.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滤镜实现
我们新建⼀个空⽩⽂本⽂件，⽐如说： 拷贝进去如下的XML代码：
复制代码
代码如下:
<svg version="1.1" xmlns="/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="james.padolsey/demos/grayscale/grayscale.js"></script>然后，⼀句话：
ElementById("thisImage"))；或DOM元素集：
ElementsByTagName("img"))；如果你喜欢使⽤jQuery，还可以使⽤：
grayscale($("#thisImage"))；很简单吧。
实现原理：IE浏览器下是添加灰度滤镜，这个⼤家都懂的。其他浏览器貌似使⽤Canvas中的getImageData⽅法，然后对每个像素点进⾏灰度转换~~
因此，在现代浏览器下，对于该⽅法，图⽚的灰度处理有两个局限性：
1. 速度。300*300这张⼀般般⼤⼩的图⽚变灰就要数秒之久；
2. 跨域。安全性机制，⽆法转换跨域的图⽚为⿊⽩⾊。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。