2

Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой: введите сюда описание изображения ) с серого на красный.

2
  • 1
    сделать ещё одну иконку красного цвета и менять её при наведении
    – ArchDemon
    14 окт 2018 в 15:42
  • Если png, то цвет background можно менять по :hover 14 окт 2018 в 18:06

3 ответа 3

7

В CSS3 это возможно с помощью свойства filter:

img:hover {
  -webkit-filter: sepia(1) hue-rotate(320deg) saturate(10);
  filter: sepia(1) hue-rotate(320deg) saturate(10);
}
<img src="https://i.stack.imgur.com/rbcA9.png">

Цепочка фильтров такова (порядок важен!):

  • sepia - по сути, делает изображение монохромным с рыжим оттенком;
  • hue-rotate - вращение цветового круга до нужного оттенка;
  • saturate - насыщенность цвета.

Источник


Чтобы какой-либо цвет превратить в белый:

body { background: #ccc; }

img:hover {
  -webkit-filter: grayscale(100) brightness(200);
  filter: grayscale(100) brightness(200);
}
<img src="https://i.stack.imgur.com/jjpgK.png">

Здесь цепочка следующая:

  • grayscale - обесцвечиваем изображение;
  • brightness - устанавливаем яркость с заведомо завышенным значением.
2
  • я дико извиняюсь, а как из красного, при наведении, сделать белый цвет картинки 1 авг 2020 в 8:27
  • @MikhaelBalkizov: дополнил.
    – UModeL
    5 авг 2020 в 15:54
2

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

спрайт с вертикально расположенными иконками

.i-folder {
  height: 42px;
  width: 57px;
  background: url(https://i.stack.imgur.com/jjpgK.png);
}
.i-folder:hover {
  background-position: 0px 42px;
}
<div class="i-folder"></div>

2

Поддержка браузерами: caniuse.com/#search=mask

div {
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-image: url('https://image.flaticon.com/icons/svg/1086/1086563.svg');
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #000;
}

div:nth-child(1) { background: linear-gradient(#e74c3c, #f1c40f); }
div:nth-child(2) { background-color: #1842de; }
div:nth-child(3) { background-color: #ffff00; }
div:nth-child(4) { background-color: #3498db; }
div:nth-child(5) { background-color: #9b59b6; }
div:nth-child(6) { background-color: #2ecc71; }
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.