Применить фильтр с CSS, чтобы изменить цвета изображения - PullRequest
Новая
       1

Применить фильтр с CSS, чтобы изменить цвета изображения

0 голосов
/ 08 сентября 2018

В этом CodePen фильтр используется для превращения синего цвета в серый: 

filter: grayscale(100%);

Как я могу изменить цвет на синий / красный / зеленый, используя фильтры CSS?

https://codepen.io/wiseoldman/pen/RVRgyB

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

Вы можете использовать фильтр hue-rotate(*x*deg) для изменения цвета, здесь я прикрепил код. 

body {
  align-items: center;
  display: flex;
  font-family: Helvetica, sans-serif;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
body div {
  font-size: 15px;
  margin-top: 15px;
  text-align: center;
}

form#smileys input[type="radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 90px;
  border: none;
  cursor: pointer;
  transition: border .2s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: 0 5px;
  transition: all .2s ease;
}
form#smileys input[type="radio"]:focus {
  
  outline: 0;
}
form#smileys input[type="radio"].happy:hover,form#smileys input[type="radio"].happy:checked{
  -webkit-filter: hue-rotate(300deg);
          filter: hue-rotate(300deg);
}
form#smileys input[type="radio"].happy {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center;
  background-size: cover;
}
form#smileys input[type="radio"].neutral:hover,form#smileys input[type="radio"].neutral:checked{
  -webkit-filter: hue-rotate(10deg);
          filter: hue-rotate(10deg);
}
form#smileys input[type="radio"].neutral {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center;
  background-size: cover;
}
form#smileys input[type="radio"].sad:hover,form#smileys input[type="radio"].sad:checked{
  -webkit-filter: hue-rotate(160deg);
          filter: hue-rotate(160deg);
}
form#smileys input[type="radio"].sad {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center;
  background-size: cover;
}

.mtt {
  position: fixed;
  bottom: 10px;
  right: 20px;
  color: #999;
  text-decoration: none;
}
.mtt span {
  color: #e74c3c;
}
.mtt:hover {
  color: #666;
}
.mtt:hover span {
  color: #c0392b;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="smileys">
	<input type="radio" name="smiley" value="sad" class="sad">
	<input type="radio" name="smiley" value="neutral" class="neutral">
	<input type="radio" name="smiley" value="happy" class="happy" checked="checked">
	<div>It looks like you're feeling <span id="result">happy</span> today..</div>
</form>

<a class="mtt" href="https://morningtrain.dk" target="_blank">
	With <span>♥</span> from Morning Train
</a>
</body>
</html>
0 голосов
/ 08 сентября 2018

Приятно и просто с CSS Фильтры

Очень просто при использовании фильтра hue-rotate().

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

Используйте filter:grayscale(1), чтобы установить для всех изображений серый цвет, затем при наведении курсора установите шкалу серого на 0 и настройте цветовые значения.

enter image description here

.colorRed,.colorBlue, .colorGreen {filter:grayscale(1);}
.colorRed:hover,.colorBlue:hover, .colorGreen:hover {filter:grayscale(0);}
.colorRed img:hover {filter:hue-rotate(0deg);}
.colorBlue img:hover {filter:hue-rotate(215deg);}
.colorGreen img:hover {filter:hue-rotate(100deg);}
<span class="colorGreen"><img src="https://i.imgur.com/ZbOHifU.png" width="100px";></span>
<span class="colorBlue"><img src="https://i.imgur.com/msjbI0M.png" width="100px";></span>
<span class="colorRed"><img src="https://i.imgur.com/tycbKyW.png" width="100px";></span>
<div class="colorRed"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
<div class="colorBlue"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
<div class="colorGreen"><img src="https://i.imgur.com/A7A9wec.jpg" width="500px";></div>
0 голосов
/ 08 сентября 2018

для подобной вещи есть фильтр hue-rotate https://developer.mozilla.org/en-US/docs/Web/CSS/filter

почему вы хотите использовать фильтр для этого, вы можете напрямую использовать color или background-color свойства для этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...