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-filter
Even 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-filter
that'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
Alpha
The properties should be usedopacity
- instead
AlphaImageLoader
Usebackground-image
- instead
Gradient
♪background-image: linear-gradient()
DropShadow
♪text-shadow
orbox-shadow
Matrix
♪transform
andtransform-origin
For exotic filters (including
Grayscale
) - SVG filters or conversionscanvas
- JavaScript.Example of use of SVG filter
saturate
to 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