CSS. Цвет картинки как шрифт. Инверсия

622

19 января 2017, 02:32

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

<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>

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

Answer 1

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

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>

Answer 2

Да, есть 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>

Answer 3

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

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>

Все фильтры.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

TCP: Стоит ли использовать Out-Of-Band? Можно ли на 1 сокет создать 2 потока recv-recv или send-send, если один из recv (send) будет OOB?

Есть heartbeat между сервером и клиентомЕсть команды которые шлются на клиент и на которые шлются ответы на сервер

454

CSS. Цвет картинки как шрифт. Инверсия

TCP: Стоит ли использовать Out-Of-Band? Можно ли на 1 сокет создать 2 потока recv-recv или send-send, если один из recv (send) будет OOB?

подобие include c#, wpf

Byte array перевести в Bitmap и сохранить на диск

C# Winforms прокрутка ComboBox