4

Проблема в следующем: Есть текст-ссылка, цвет шрифта - синий, цвет фона - белый.

<a href="#">ссылка</a>

Средствами CSS при наведении цвета меняются.

a {color:blue; background:white;}
a:hover {color:white; background:blue;}

Перед текстом ссылки будет стоять иконка (ч/б или спрозрачностью).

<a href="#"><img src="ico.png"/>ссылка</a>

либо

<a href="#"><img src="ico.jpg"/>ссылка</a>

Существует возможность сделать так что бы картинка работала как маска? То есть в конкретном примере нужно что бы при наведении курсора иконка меняла цвет с синего на белый.

3 ответа 3

6

Придумал интересный костыль (при условии, что картинка однотонная по прозрачному):

a {
  display: inline-block;
  font-size: 100px;
  padding: .25em;
  color: #157EFB;
  background-color: white;
}

span {
  display: inline-block;
  overflow: hidden;
}

img {
  width: 128px;
  height: 128px;
  display: block;
}

a:hover {
  color: white;
  background: #157EFB;
}

a:hover img {
  transform: translateX(-100%);
  filter: drop-shadow(128px 0 0 white);
}
<a><span><img src="//i.stack.imgur.com/K8JyZ.png" height=128 width=128></span> + text</a>

7
  • это уже поинтереснее вариант)
    – Павел
    17 янв 2017 в 19:48
  • 1
    Ого, круто придумано! 17 янв 2017 в 19:49
  • наверное самым гибким способом будет использование hue-rotate для смены цвета и brightness для создания белого цвета...
    – Павел
    17 янв 2017 в 19:55
  • @Павел, пробуй. Вроде этот вариант хороший, не?
    – Qwertiy
    17 янв 2017 в 19:56
  • 1
    Самое то что надо) Запилил тест jsfiddle.net/Ciberpol/so2zbmye Спасибо за правильное направление)
    – Павел
    17 янв 2017 в 20:26
3

Да, есть filter invert. Можно было бы залить span белым и инвертировать его, но я сделал несколько по-другому:

span {
  display: inline-block;
  font-size: 100px;
  padding: .25em;
}

span:hover {
  color: white;
  background: black;
}

span:hover img {
  filter: invert(100%);
}
<span><img src="//i.stack.imgur.com/5XdlR.png" height=128 width=128> + text</span>

2
  • хм... может попробовать дивы и background-blend-mode...
    – Павел
    17 янв 2017 в 19:41
  • @Павел, я уже поинтереснее костыль придумал. Опубликовал отдельным ответом.
    – Qwertiy
    17 янв 2017 в 19:45
1

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

a:hover img {
  -webkit-filter: grayscale(100%) brightness(1000%);
  webkit: grayscale(100%) brightness(1000%);
}

Пример:

.bg {
  display: inline-block;
  padding: 8px 8px 4px;
  background: #aaa;
}

.bg:hover img {
  -webkit-filter: grayscale(100%) brightness(1000%);
  webkit: grayscale(100%) brightness(1000%);
}
<div class="bg">
  <img src="https://s.imgur.com/images/imgur-logo.svg">
</div>

Все фильтры.

11
  • 1
    1. webkit => filter. 2. Поменяй местами префиксную и нормальную запись. 3. Что-то странное решение с 1000%...
    – Qwertiy
    17 янв 2017 в 19:28
  • Дык это совсем не то. Такой способ просто сделает картинку чернобелой.
    – Павел
    17 янв 2017 в 19:30
  • Вроде вполне нормальная поддержка, ну кроме Edge12-.
    – Qwertiy
    17 янв 2017 в 19:30
  • @Qwertiy, чтобы сделать картинку из синей белой? Вроде бы нет другого способа. 17 янв 2017 в 19:31
  • Ой.. А вот это я не подумал...
    – Qwertiy
    17 янв 2017 в 19:31

Ваш ответ

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

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