IE Mozilla, filter is not correct
Only one Google Chrome is right! How exactly do you need to build cross-sbrauser styles to make the image black white? I did that:
-webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); -moz-filter: grayscale(100%);
Here's the patient. http://myatlanta.pe.hu/templates1/
Anyway, for those who would like to know, even online, there are no examples, no backwhite images, and no SVG filters work either, but the substitution of the image saves. No better answer.
The filters have long been outdated, even though their support remained in some browsers.
For the first time, this atribut appeared on Internet Explorer 4 (primary with prefix)
-ms-and then without) for the use of the DirectX filters on the web. Starting from the 8th version, this atribut in the Validation was seen as obsolete. In IE 10, the developers removed the support for this attribute. He wasn't added to Edge at all.
Google Chrome still preserves the prefixed version of this attribute.
-webkit-filterEven though he's also marked as an aging.
Mozilla Firefox only retained his perfect version(s)
filter) You're using it as a remote one.
-moz-filterthat's why it's not working.
It is not possible to continue using this attribute, since its support may soon be removed from other browsers than IE.
In the notes to issue IE10, Microsoft strongly recommended, instead, that the filter use the long-term available css3 facilities:
- For filter
AlphaThe properties should be used
For exotic filters (including
Grayscale) - SVG filters or conversions
Example of use of SVG filter
saturateto create an effect similar to that required by you:
<svg width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="saturate" values="0"/> </filter> <image filter="url(#grayscale)" width="100%" height="100%" xlink:href="http://myatlanta.pe.hu/templates1/img/blackwhite/pic1.jpg" /> </svg>
- For filter