logo标签列表

使用CSS应用滤镜来改变图片颜色

cssfilter
8
在这个CodePen示例中，使用了一个过滤器将蓝色变成灰色：
filter: grayscale(100%);

如何使用CSS滤镜将颜色更改为蓝色/红色/绿色？

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

3个回答
11

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>

不客气。如果我的回答解决了你的问题，请别忘了勾选它作为答案。如果你需要其他帮助，随时告诉我 :) - Electron
我应该提到，我决定不更改您的原始代码，而是展示它以另一种方式使用，展示从红色开始的技巧，以帮助获取其他颜色值，并展示如何在选择一个颜色之前将所有颜色设置为灰色。然后可以将其调整为适合您当前代码的形式。 - Electron
2

你可以使用滤镜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>

非常感谢，这正是我一直在寻找的。 - smolo
@toms 不用谢，如果这正是你一直在寻找的，请接受这个解决方案。 - chintuyadavsara
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接