Відтінки сірого із CSS та перефарбування при наведенні курсору на екран?


86

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

Чи можливо це зробити і таким чином, що підтримується IE & Firefox?


2
Майже дублюється ... stackoverflow.com/q/609273/670377
Том 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 (із використанням градацій сірого та кольорових зображень)

Для цього підходу потрібні дві копії зображення: одна у відтінках сірого, а інша - у повноколірному. Використовуючи CSS :hoverpsuedoselector, ви можете оновити фон вашого елемента, щоб перемикатися між ними:

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

Цього також можна досягти, використовуючи ефект наведення на основі Javascript, такий як hover()функція jQuery таким же чином.

Розглянемо сторонні бібліотеки

Desaturate бібліотека є загальна бібліотека , яка дозволяє легко перемикатися між версією в відтінках сірого і повнокольорові версії даного елемента або зображення.


Якщо вказані зображення потрібно пов’язати з іншим веб-сайтом, як це можна зробити, якщо зображення встановлені як фони?
Meta

1
Це працювало б так само, перегляньте демонстраційну версію в розділі 1. Якщо у вас є якісь інші запитання, я буду радий допомогти.
Rion Williams

1
хлопці, чи хтось помічав, що це не працює в сафарі? Я щойно перевірив і знайшов цю проблему, чи є спосіб її вирішити?
Gajen

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 робить зображення "ривком" при перекиданні ....
Райан Coolwebs


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.