Как раскрасить изображение в CSS?

Question

Существует ли кросс-браузерный способ использования CSS для изменения оттенка изображения. Например, если у меня есть значок в градациях серого (элемент img), я бы хотел, чтобы при наведении курсора он менял цвета на сепию.

Это должно работать в браузерах, отличных от IE, поэтому я не могу использовать фильтр. Есть ли какой-нибудь трюк с CSS 3, который позволил бы это?

Answer 1

, если вы хотите изменить изображение в css, это невозможно сделать. но вы можете играть со свойством opacity. да, это только установить непрозрачность изображения, но это будет хороший эффект. Вот пример:

img{-webkit-transition:opacity .3s ease-in-out;}
img:hover{opacity:.6}

этот фрагмент даст хороший переходной эффект постепенного появления и исчезновения изображения в прозрачное.

в другом случае вы можете использовать спрайт изображения, чтобы делать то, что вы хотите:)

Answer 2

Не существует точного способа сделать это в CSS, как уже упоминалось, вы можете использовать для этого другие технологии, а именно Javascript.

В очень простом смысле вы можете попытаться имитировать стиль сепии, наложив div поверх изображения с сепией , такой как , и непрозрачностью rgba(94, 38, 18, 0.2) - но этот метод довольно грубый. Вы можете даже наложить прозрачное изображение, которое может быть лучше, чем этот вариант (но все равно довольно мусор).

Answer 3

Для этого не существует стандартизированного кросс-браузерного синтаксиса. Вы можете, однако, использовать HTML5 Canvas и сделать этот эффект самостоятельно. Использование SVG также может работать, но я не уверен, насколько хорошо все браузеры, в частности Internet Explorer, поддерживают SVG.

Пример SVG с использованием преобразования цветовой матрицы: http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml

Answer 4

Я знаю, что действительно опаздываю на ответ на эту тему, но я хотел сделать то же самое, что и вы, и не смог найти ответ.Но первый парень здесь дал мне просветление.

Что мне было нужно: изображение, которое было довольно раскрашено каким-то цветом, и когда я наведу на него курсор, оно снова будет нормальным.Итак, что я сделал, я установил цвет фона на цвет, который я хотел, чтобы изображение было, а затем я уменьшил его непрозрачность.Итак, я получил цветное изображение.И когда я наведу на него курсор, я снова установил прозрачный фон и изображение в полной непрозрачности.Так что с помощью CSS можно раскрасить изображение, используя backgorund-color и opacity.

img {
    background-color: rgba(122, 122, 122, 1);
    opacity: 0.5;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}

img:hover {
    color: rgba(255, 255, 255, 0);
    opacity: 1;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}

Это хорошо сработало для меня.