An introduction to using CSS3 to write gray-scale filters to produce black and white photo effects

This article mainly introduces the use of CSS3 to write gray-scale filter to make black and white photo effect, the filter in CSS3 is very powerful, the article also introduces the method of IE compatibility, the need for friends can refer to the next

The filter feature in CSS3 makes it easy and easy to work with images without using PhotoShop or using a lot of JavaScript and PHP code. This property has been supported by newer Firefox, Safari, and Chrome browsers, and we can simulate this with a combination of alternative techniques-even IE.

In this article, we will use the standard test picture Lena Söderberg (Translator Note: Lena This beautiful photo, used as a standard test picture of image compression) as a demonstration, using CSS to convert it into black and white pictures. Below I will explain how to use this feature of CSS to adjust hue, blur, brightness, contrast, and some other effects. ：

Gray-scale filter for CSS3

Using CSS3 to dilute the color of an image is easy. We can put this CSS statement into a class, so that we encounter the desired effect of the picture, directly add a class to it.

img.desaturate {Filter:grayscale (100%);}

Of course, the current browser when using CSS3, to add their own browser function experimental prefix, so, the first thing we have to do is to write the browser prefix:

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

It's simple to use a picture, plus a class:

That's it. # # Add an SVG filter effect this feature is currently only available in Chrome, and other browsers will add support right away. In order to get the same effect in Firefox 4+, we can use the SVG filter. I have created a separate file for the saturate.svg, the code is as follows:

<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 00.3333 0.3333 0.3333 0 00.3333 0.3333 0.3333 0  0  0< c9/>1 0 "/>   </filter>   </svg>

Don't be intimidated by this SVG code-although the matrix sequence above is a bit complicated. This code I recommend you directly copy paste into a generic "small file". I will write another article in detail on the above matrix changes, here no longer repeat. Add the above SVG file reference, we want to insert HTML page CSS code as follows:

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);   }

For IE compatibility:

Now our code can be compatible with future browsers, and the latest version of Chrome, Firefox 4+. In order for IE 6-9 to join the compatibility List, we need to use Microsoft's clumsy but effective filter filter:

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

If you still want to do the old version of the Webkit kernel browser compatibility:

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);   }

If you want to implement this visual in all browsers (assuming your visitors support JavaScript), you can use JQuery or greyscale.js to modify your image to make it go color.

The CSS code we've written above allows us to turn images into black and white without having to use PhotoShop. Using CSS to implement this feature can be very easy to modify: For example, you can see that when we turn the de-color parameter from 100% to 50%, the image will be a combination of the primary color and black-and-white effect.

Other effects:

In addition, the black and white photos can also add some other filter effects are:

-webkit-filter:blur (5px);  Blur, here is 5 pixels-webkit-filter:sepia (0.5);  Superimposed Brown, the value range 0-1, here represents 50% of the brown-webkit-filter:brightness (0.5); brightness, the value range 0-1, 5 times times the brightness (the number is 0 when the Normal style, 1 is the 100% brightness, can not see the picture)-webkit-filter:hue-rotate (30deg);  Hue (rotate by hue ring, clockwise, red-orange-yellow-yellow green-green-blue-green-blue-blue-violet-fuchsia-red) Here is the overlay yellow filter-webkit-filter:invert (1);  The inverse color, the value range 0-1,0 is the original image, 1 is the complete inverse color, 0.5 is the gray-webkit-filter:saturate (4);  Saturation, the value range 0~*,0 to no saturation, 1 is the original, the higher the value of saturation-webkit-filter:contrast (2);  Contrast, the value range 0~*,0 to no contrast (gray), 1 is the original, the higher the value of the greater the contrast-webkit-filter:opacity (0.8); The transparency, the value range 0~1,0 is full transparent, 1 is the original-webkit-filter:drop-shadow (17px 17px 20px Black); Shadow