使用 CSS 的彩色剪影

Question

我有以下生成 PNG 图像轮廓的代码：

#silhouette img {
  -webkit-filter: grayscale(100%) brightness(0);
  filter: grayscale(100%) brightness(0);
  opacity: 0.6;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

我在 Whosebug (1, , ) 中发现了一些问题，但它们都专注于在 black/gray 中获取 shadow/silhouette 而不是获取它的彩色版本（例如我希望轮廓是红色或蓝色）。

我尝试使用这些解决方案和 hue-rotate 过滤器（应用于 img 或 div）但我没有得到任何好的结果。我猜这是因为一旦亮度设置为 0/100，轮廓就是 black/white 并且色调变化无关紧要。

是否可以只使用 CSS 来做我想做的事？怎么做到的？

注意：我不想给图像着色，而是要完全着色，Tint image using CSS without overlay are good, but they don't work in my case as what they do is tint the image so it's different tones of one color (as you can see in this JSFiddles I created for each of the solutions: 1, 2, 3, 4) 中的解决方案，而我想要的是像这样的纯色剪影：

Answer 1

您可以将对比度设置为 0，然后使用其他值，而不是使用灰度。大量 saturate 有助于制作更大胆的颜色。

#silhouette img {
  -webkit-filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);
  filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);
  opacity: 1;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

Answer 2

您可以通过组合属性 hue-rotate() saturate() 和 brightness().

来做到这一点

我首先找到了您图像的基色（蓝色）并将其转换为 hsl 220,100,50 hsl picker 。现在找到您想要更改的颜色，并从刚刚获得的 hue 值中减去 220，然后应用 hue-rotation()

参考：

#silhouette img {
  -webkit-filter: hue-rotate(140deg) saturate(100%) brightness(100%);
  filter: hue-rotate(140deg) saturate(100%) brightness(100%);
}

#silhouette img.grn{
  -webkit-filter: hue-rotate(140deg) saturate(100%) brightness(100%);
  filter: hue-rotate(-107deg) saturate(100%) brightness(100%);
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" class="grn"/>
</div>

Answer 3

只需使用可用的 Filter property Functions 查看示例代码段。

#silhouette img {
  -webkit-filter: grayscale(99%) brightness(0.85) sepia(90) contrast(10);
  filter: grayscale(99%) brightness(0.85) sepia(90) contrast(10);
  opacity: 0.75;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

使用 CSS 的彩色剪影

Colored silhouette using CSS

css

css-filters