Small tip: Use CSS to convert images into black and white (gray, grey)? Zhang Xin Xu-Xin space-Xin Life

Tag:type   url    is    www.   jpg    elements    text file     call     Gray    

   Small tip: Use CSS to convert a picture to black and white (gray, grey) This article was posted on August 19, 2012, Sunday, 20:41, sorted by CSS related, SVG related. Read 159,943 times Today 146 times by Zhangxinxu from http://www.zhangxinxu.com This article address: http://www.zhangxinxu.com/wordpress/?p=2547//zxx : Recently very actively toss some things on the mobile phone page, plus some other important things in life, so the wood has been updated. 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-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. The CSS3 greyscale filter implements the following test code:. 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, such as: Gray.txt. Copy in the following XML code: &LT;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. You can then invoke 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 implementation photo Black and white demo do not forget the IE browser implementation has been mentioned above, that is: filter:gray; at least ie7~9 is supported. Recently more lazy, IE6 lazy to test, support or not know. Experience, it should be supported. I need a unified Jiangshan method unified Jiangshan (fully compatible), if you simply want to pass 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 easy. 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. So, 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 Gray compatibility Implementation demo is consistent with the above, slightly. Added on December 21, 2015 Many people Mail asked, IE10, IE11 these two underachievement browser how? 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.3 333 0.3333 0.3333 0 0 0 0 0 1 0 "/></filter></svg>2. The image is then converted to an SVG picture 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 a picture to black and white (gray, grey)? Zhang Xin Xu-Xin space-Xin Life