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 you have read our privacy policy.

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