Small tip: Use CSS to convert images into black and white (gray, grey)

Probably already knew, like Wenchuan this kind of Bad Day website all ash under IE can be easy to implement ( filter: gray; ), however, at that time, other browsers are non-solution. 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:

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

HTML code:

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 the following XML code:

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

The following CSS call code:

Filter:url (Gray.svg#grayscale);

Then, the effect comes out. If your browser is firefox4+, you can click here: SVG filter for photo black and white demo

Don't forget the 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.

Unified Jiangshan (fully compatible), if you simply want to pass the CSS, 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 usage is simple, refer to the 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 simple.

implementation principle : Under IE browser is to add the grayscale filter, this everybody understands. Other browsers seem to use the methods in canvas getImageData and then convert each pixel to grayscale.

Therefore, in modern browsers, for this method, the grayscale processing of the image has two limitations:
1. speed . 300*300 This picture of the general size of the gray will be a few seconds long;
2. cross-domain . Security mechanism, cannot convert cross-domain pictures to black and white.

You can click here: Greyscale.js photo grayed-out compatibility to achieve demo

Consistent with the above, slightly.

Added on December 21, 2015
Many people Mail asked, IE10, IE11 these two underachievement browser what to do?

I personally use the SVG implementation (specifically for the ie10-ie12), when the glass-speaking effect of a similar implementation.

1. Page loading (can request loading, or directly in the HTML code) above gray.txt the corresponding SVG file, that is:

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

2. Then convert the picture to an SVG image reference, and the Filter property value points to grayscale (the Red ID value above). For example

<svg>    <image xmlns:xlink= "Http://www.w3.org/1999/xlink" xlink:href= "zxx.jpg" x= "0" y= "0" width= "256" height= "filter=" url (' #grayscale ') ></image></svg>

over~

Small tip: Use CSS to convert images into black and white (gray, grey)