Convert image to black and white using CSS

With the development of the times, nowadays, with the gradual advancement of CSS3, we have also begun to see the possibility of large-scale application of "black and white effect" in practice. Next, we will introduce the CSS3 greyscale filter implementation. Interested friends can learn more You may have known for a long time that making websites in bad days like Wenchuan completely gray can be easily achieved under IE (filter: gray;). However, at that time, other browsers had no solution. However, with the development of the times, and now, with the gradual advancement of CSS3, we have also begun to see the possibility of large-scale application of the "black and white effect" in practice.

CSS3 greyscale filter implementation
The following test code:

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:

<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   / alt="Convert image to black and white using CSS" > 
<img  class="gray lazy"  src="/static/imghwm/default1.png"  data-src="mm1.jpg"    / alt="Convert image to black and white using CSS" >

If the browser you have is Chrome18+, you can click here: CSS3 greyscale filter and Photo black and white ⤴
You can see the black and white contrast renderings shown at the beginning of similar articles.
Other browsers, such as FireFox will soon follow suit. Of course, it is also possible to achieve the effect of turning photos into black and white on (for example) FireFox 4 browser. You can use the grayscale filter effect of SVG.
SVG filter implementation
We create a new blank text file, for example: gray.txt. Copy 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 it~~

The following CSS calling code:
filter: url(gray.svg #grayscale);Then, the effect comes out. If the browser you have is FireFox4+, you can click here: SVG filter to achieve black and white photos demo⤴
Don’t forget IE browser
IE implementation has been mentioned above, that is ：
filter: gray; At least IE7~9 is supported. I've been too lazy to test IE6 recently, so I don't know if it is supported or not. Judging from experience, it should be supported.
I need a way to unify the country
To unify the country (fully compatible), if you just want to use CSS, you can do it. All you have to do is: take a fishing rod and go fishing in the Huangpu River every day, year after year. , day after day... Then, two years later, as long as two years, F5 on the two demo pages above, that's it! It's very simple!
If you think the above approach is too London-based, and you are not one-minded, there is a way to unify the world, but it is not CSS, but Greyscale.js, which seems to be somewhat famous.
The usage is very simple, quote the JavaScript file, as follows:
Then, one sentence Words:
grayscale(document.getElementById("thisImage")); or DOM element set:
grayscale(document.getElementsByTagName("img")); If you like to use jQuery, you can also use:
grayscale($("#thisImage")); It's very simple.
Implementation principle: Under IE browser, a grayscale filter is added. Everyone knows this. Other browsers seem to use the getImageData method in Canvas, and then perform grayscale conversion on each pixel~~
Therefore, under modern browsers, this method has two limitations for grayscale processing of images:
1. Speed. It takes a few seconds for this 300*300 average-sized picture to turn gray;
2. Cross-domain. Security mechanism, cross-domain images cannot be converted to black and white.

The above is the detailed content of Convert image to black and white using CSS. For more information, please follow other related articles on the PHP Chinese website!