CSS3 Black and white pictures

Whenever there is a natural disaster, many sites are gray, want to know how to achieve it?

How to 1.IE private filters
Since IE4, IE introduced the private filter, can achieve transparency, blur, shadow, glow and other effects, of course, can also achieve grayscale image effect. The code is as follows

{        filter: Gray/** /    

IE10 began to abandon this private filter, but has not yet provided support for the standard Cssfilter, so it is still a problem to say that the grayscale image of the IE10 or above version.
2.W3C CSS Filter Mode
CSS3 provides a standard CSS filter scheme in the form of the IE private filter, which can support grayscale grayscale, sepia brown, saturate saturation, hue-rotate hue rotation, invert inverse color, opacity transparency, Brightness brightness, contrast contrast, blur blur, Drop-shadow shadow, etc. 10 kinds of effects. About CSS3 filter You can refer to the following tutorials: The desert's "CSS3 Filter 10 special effects" and Adobe's "CSS filter Lab."
The code that implements the grayscale grayscale image is like this

img{-webkit-filter:grayscale (100%);/*WebKit kernel supports a good degree*/-moz-filter:grayscale (100%);/*other kernels are not supported now, write for future compatibility*/-ms-filter:grayscale (100%);-o-filter:grayscale (100%);Filter:grayscale (100%);/*Standard notation*/}

Where the value of grayscale () is 0%-100%, can also be replaced with 0-1, 0% for color images, 100% for full grayscale.
CSS filter browser compatibility is as follows, Chrome31+,safari7+,opera20+,ios safari6+,android Browser4.4+,blackberry All support the way of-webkit-filter, IE does not support, Firefox does not support.

3.SVG Mode Implementation

Create a new TXT file, paste the code in to change the suffix to SVG by filter:url (Gray.svg#grayscale);

<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>

4.JS Implementation method

<src= "Http://james.padolsey.com/demos/grayscale/grayscale.js"></  script><script>//grayscale ( document.getElementById ("Thisimage"));//grayscale (document.getElementsByTagName ("img"));//grayscale ($ ("# Thisimage ")); </ Script >

Call mode three Select one

CSS3 Black and white pictures