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.sstatic.net/K8JyZ.png" height=128 width=128></span> + text</a>

7
  • это уже поинтереснее вариант)
    – Павел
    Commented 17 янв. 2017 в 19:48
  • 1
    Ого, круто придумано! Commented 17 янв. 2017 в 19:49
  • наверное самым гибким способом будет использование hue-rotate для смены цвета и brightness для создания белого цвета...
    – Павел
    Commented 17 янв. 2017 в 19:55
  • @Павел, пробуй. Вроде этот вариант хороший, не?
    – Qwertiy
    Commented 17 янв. 2017 в 19:56
  • 1
    Самое то что надо) Запилил тест jsfiddle.net/Ciberpol/so2zbmye Спасибо за правильное направление)
    – Павел
    Commented 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.sstatic.net/5XdlR.png" height=128 width=128> + text</span>

2
  • хм... может попробовать дивы и background-blend-mode...
    – Павел
    Commented 17 янв. 2017 в 19:41
  • @Павел, я уже поинтереснее костыль придумал. Опубликовал отдельным ответом.
    – Qwertiy
    Commented 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
    Commented 17 янв. 2017 в 19:28
  • Дык это совсем не то. Такой способ просто сделает картинку чернобелой.
    – Павел
    Commented 17 янв. 2017 в 19:30
  • Вроде вполне нормальная поддержка, ну кроме Edge12-.
    – Qwertiy
    Commented 17 янв. 2017 в 19:30
  • @Qwertiy, чтобы сделать картинку из синей белой? Вроде бы нет другого способа. Commented 17 янв. 2017 в 19:31
  • Ой.. А вот это я не подумал...
    – Qwertiy
    Commented 17 янв. 2017 в 19:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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