Use CSS to convert images into black and white

The development of the Times, now, CSS3, we also began to see the "Black and white effect" large-scale application of the actual possibility, the next introduction CSS3 greyscale filter implementation, interested friends can understand that may have long known, like Wenchuan this bad Day website all gray in IE can be easily implemented (Filter:gray;), however, at the time, other browsers were non-solvable. However, the development of the Times, now, the gradual progress of CSS3, we also began to see the "Black and white effect" large-scale application of the actual possibility.

CSS3 greyscale Filter Implementation
Test code as follows:

The code is as follows:

. Gray {-webkit-filter:grayscale (100%);-moz-filter:grayscale (100%);-ms-filter:grayscale (100%);-o-filter: Grayscale (100%); Filter:grayscale (100%); filter:gray;}

HTML code :

The code is as follows:

If your browser is chrome18+, you can click here: CSS3 greyscale filters and photos in black and white
You can see a black-and-white contrast similar to the beginning of the article.
Other browsers, such as Firefox, will soon follow the implementation. Of course, it is also possible to achieve (for example) the effect of a black and white photo on a Firefox 4 browser. You can use the Grayscale filter effect for SVG.
SVG filter Implementation
We create a new blank text file, for example: Gray.txt. Copy in the following XML code:

The code is as follows:

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

Then, modify the suffix. txt→.svg. Then you can call ~ ~

The following CSS calling code :
Filter:url (Gray.svg#grayscale); Then, the effect comes out. If your browser is firefox4+, you can click here: SVG filter implementation photo black and white demo
do not forget IE browser
IE implementation has been mentioned above, that is :
Filter:gray; At least the ie7~9 are supported. Recently more lazy, IE6 lazy to test, support or not know. Experience, it should be supported.
I need a way to unified Jiangshan
Unified Jiangshan (fully compatible), if you simply want to pass the CSS, it is also possible, you have to do is: every day take a fishing rod to the Huangpu River fishing, year after year, everyday ... Then, two years later, as long as two years, the above two demo page F5 a bit, you can! It's simple!
If the above practice is too London, and you are not a rib, to a unified Jiangshan method, but not the dry CSS, a seemingly somewhat famous greyscale.js. The
is simple to use, referencing a JavaScript file, as follows:
<script src= "Http://james.padolsey.com/demos/grayscale/grayscale.js" >< /script> then, in a word:
Grayscale (document.getElementById ("thisimage"); or DOM element set:
Grayscale ( document.getElementsByTagName ("img")); If you prefer to use jquery, you can also use:
Grayscale ($ ("#thisImage")); it's easy. The
Implementation principle: Under IE browser is to add the grayscale filter, this everybody understands. Other browsers seem to use the Getimagedata method in canvas and then convert each pixel to grayscale ~ ~
Therefore, under modern browsers, for this method, the grayscale processing of the picture has two limitations:
1. Speed. 300*300 This general-size picture turns gray for a few seconds;
2. Cross-domain. Security mechanism, cannot convert cross-domain pictures to black and white.