CSS converts a color image into a black/white image

Grayscale filter of CSS3
It's easy to use CSS3 to dilute the color of an image. We can write this CSS statement as a class. In this way, we can directly add a class to the image we want to improve the effect.

The code is as follows:	Copy code
Img. desaturate {filter: grayscale (100% );}

Of course, when using CSS3, the current browser needs to add their own experimental prefix for browser functions. Therefore, the first thing we need to do is to write the browser prefix:

The code is as follows:	Copy code
Img. desaturate {filter: grayscale (100% ); -Webkit-filter: grayscale (100% ); -Moz-filter: grayscale (100% ); -Ms-filter: grayscale (100% ); -O-filter: grayscale (100% ); }

It is very easy to use on an image. Add a class:

The code is as follows:	Copy code
.

Adds an SVG filter effect.
This function is currently only available in Chrome 18 + and will be available in other browsers immediately. To achieve the same effect in Firefox 4 +, we can use the SVG filter. I have created a separate file named saturate. svg. The code is as follows:

The code is as follows:	Copy code
<Svg version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <Filter id = "greyscale"> <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>

Don't be intimidated by this SVG code-although the matrix sequence above is a bit complicated. I recommend that you copy and paste this code into a common "small file ". I will write another article to introduce in detail the matrix changes above. I will not repeat them here.

With the reference of the above SVG file, the CSS code for inserting the HTML page is as follows:

The code is as follows:	Copy code
Img. desaturate { Filter: grayscale (100% ); -Webkit-filter: grayscale (100%);-moz-filter: grayscale (100% ); -Ms-filter: grayscale (100%);-o-filter: grayscale (100% ); Filter: url (desaturate. svg # greyscale ); }

Compatibility with IE
Up to now, our code can be compatible with future browsers, and the latest versions of Chrome and Firefox 4 +. To add IE 6-9 to the compatibility list, we need to use Microsoft's clumsy but effective filter:

The code is as follows:

Copy code

Img. desaturate { Filter: grayscale (100% ); -Webkit-filter: grayscale (100%);-moz-filter: grayscale (100% ); -Ms-filter: grayscale (100%);-o-filter: grayscale (100% ); Filter: url (desaturate. svg # greyscale ); Filter: gray; } Img. desaturate { Filter: grayscale (100% ); -Webkit-filter: grayscale (100%);-moz-filter: grayscale (100% ); -Ms-filter: grayscale (100%);-o-filter: grayscale (100% ); Filter: url (desaturate. svg # greyscale ); Filter: gray; -Webkit-filter: grayscale (1 ); }

Unfortunately, Safari and Opera are still not supported, but Safari 5.2 -- will be released soon -- it should support the webkit CSS3 filter function, and Opera's support for CSS3 is constantly improving.