Фильтр: оттенки серого (100%) в IE 11 для изображений

Я искал во всем Интернете, но я не нашел никакого решения.

Кто-нибудь может сказать, какая альтернатива для css3 filter и для transistion3d в IE 11 и IE 12?

Я не хочу использовать какие-либо плагины.

Не для SVG хочу тег <img>

css internet-explorer-11 internet-explorer-10

12.03.2019 11:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 627

Ответы 2

Поскольку фильтр не поддерживается в IE11 - есть такие хаки, как это. Однако он должен включать много JS, видимых здесь, что означает запись обнаружения браузера в JS и многое другое. -

12.03.2019 16:30

Вы можете попробовать добавить два вида изображений: исходное изображение и изображение в градациях серого. Затем с помощью div отобразите эти изображения. так:

<style>
    .grayscale {
        background-image: url('images/Image1.jpg');
        background-size: cover; /* <------ */
        background-repeat: no-repeat;
        background-position: center center;
    }

        .grayscale:hover {
            background-image: url('images/imag1_gray.PNG') ;
            background-size: cover; /* <------ */
            background-repeat: no-repeat;
            background-position: center center;
        }
</style>
<div class = "grayscale" style = "width:500px; height:500px">
</div>

результат такой: