html - 如何更改图像的灰度滤镜中的自定义颜色？

Question

这是我一直用来制作图像灰度的代码。

img {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}

Answer 1

不清楚你在问什么，但是 filter 可以取多个值。

mix-blend-mode 可用于将图像与其他元素(背景、文本...)混合

一些例子，直到你弄清楚你的问题

img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  box-shadow: 0 0 0 3px white;
}

img:nth-child(2) {
  -webkit-filter: grayscale(100%) contrast(160%);
          filter: grayscale(100%) contrast(160%);
}

img:nth-child(3) {
  -webkit-filter: grayscale(50%) contrast(400%) blur(2px);
          filter: grayscale(50%) contrast(400%) blur(2px);
}

img:nth-child(4) {
  -webkit-filter: grayscale(0%) contrast(200%) blur(0px) sepia(100%);
          filter: grayscale(0%) contrast(200%) blur(0px) sepia(100%);
}

img:nth-child(5) {
  -webkit-filter: grayscale(0%) contrast(200%) blur(0px) sepia(0%) brightness(200%);
          filter: grayscale(0%) contrast(200%) blur(0px) sepia(0%) brightness(200%);
}

img:nth-child(6) {
  -webkit-filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(150deg);
          filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(150deg);
}

img:nth-child(7) {
  -webkit-filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(1);
          filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(1);
}

img:nth-child(8) {
  -webkit-filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(0) saturate(5);
          filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(0) saturate(5);
}

img:nth-child(9) {
  -webkit-filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(0) saturate(5) opacity(0.5);
          filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(0) saturate(5) opacity(0.5);
}

img:nth-child(11) {
  filter: grayscale(0%) contrast(100%) blur(0px) sepia(0%) brightness(100%) hue-rotate(0deg) invert(0) saturate(1) opacity(1);
  mix-blend-mode: multiply;
}
p {
  position:absolute;
  color:white;
  font-size:3em; 
}

body {
  background: -webkit-linear-gradient(45deg, tomato, turquoise, lime, gray, white, gold);
  background: linear-gradient(45deg, tomato, turquoise, lime, gray, white, gold);
  background-size: 205px 206px;
}

<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /> 
<img src="http://lorempixel.com/200/200/nature/2" /><p>some text</p> 
<img src="http://lorempixel.com/200/200/nature/2" />

span {
  display: inline-block;
  animation: hue-rotate 5s infinite;
}
img {
  display: block;
  mix-blend-mode: multiply;
}
span:hover {
  animation:none;
}
.a {
  background:none;
}
.b {
  background: blue;
}
.c {
  background: green;
}
.d {
  background: brown;
}
.e {
  background: yellow;
}
.f {
  background: gray;
}
.g {
  background: purple;
}
.h {
  background: red;
}
@keyframes hue-rotate {
  to {
    filter: hue-rotate(360deg);
  }
}

<span class="a"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="b"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="c"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="d"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="e"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="f"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="g"><img src="http://lorempixel.com/200/200/nature/2" /></span>
<span class="h"><img src="http://lorempixel.com/200/200/nature/2" /></span>