Изображение в оттенках серого с CSS и перекрашивание при наведении курсора мыши?

86

Я хочу взять цветной значок (и будет ссылкой) и повернуть его в оттенки серого, пока пользователь не наведет указатель мыши на значок (где он затем раскрасит изображение).

Возможно ли это сделать и таким образом, который поддерживается IE и Firefox?

css mouseover grayscale Мета
источник
2
Почти дублирован ... stackoverflow.com/q/609273/670377
Tom Sarduy
Разве не было бы более интересного эффекта, если бы вы сделали наоборот? пусть курсор мыши будет чем-то вроде волшебной палочки, которая приносит цвет в темный мир?
X10D

Ответы:

242

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

Чистый CSS (с использованием только одного цветного изображения)

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Показать фрагмент кода

Вы можете найти статью об этой технике здесь .

Чистый CSS (с использованием оттенков серого и цветных изображений)

Для этого подхода требуются две копии изображения: одна в оттенках серого, а другая - в полноцветном. Используя :hoverпсевдоселектор CSS , вы можете обновить фон своего элемента, чтобы переключаться между ними:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

Показать фрагмент кода

Этого также можно добиться с помощью эффекта наведения на основе Javascript, такого как hover()функция jQuery, аналогичным образом.

Рассмотрим стороннюю библиотеку

Библиотека обесцвечивания - это общая библиотека, которая позволяет легко переключаться между версией в градациях серого и полноцветной версией данного элемента или изображения.

Рион Уильямс
источник
Если указанные изображения должны быть связаны с другим веб-сайтом, то как это можно сделать, если изображения установлены в качестве фона?
Мета
1
Это будет работать точно так же, посмотрите демо в разделе 1. Если у вас есть другие вопросы, я буду рад помочь.
Рион Уильямс
1
ребята, кто-нибудь заметил, что в сафари это не работает? Я только что проверил и обнаружил эту проблему, есть ли способ ее решить?
Gajen 06
13

Ответ здесь: преобразовать изображение в оттенки серого в HTML / CSS

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

img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}
img:hover {
  filter: none;
  -webkit-filter: none;
}

и файл filters.svg вот так:

<svg 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>
Юрай Блатервик
источник
6

Я использую следующий код на http://www.diagnomics.com/

Плавный переход от ч / б к цветному с эффектом увеличения (шкала)

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }
Стефан Грюнвальд
источник
Отлично работает в браузерах webkit! Ваш код не работает для меня в браузере Firefox, но, опять же, я думаю, что это как-то связано с файлом SVG, и я использую растровое изображение в этой скрипке jsfiddle.net/coolwebs/num04rya/10 Хотя что-то странное - переход эффект в Safari заставляет изображение "дергаться" при наведении курсора ....
Райан Кулвебс,
0

Вы можете использовать спрайт, в котором хранятся обе версии - цветная и монохромная.

Feela
источник