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

我在 StackOverflow ( 1 , 2 , 3 )中发现了一些问题，但所有这些问题都集中在获得黑色/灰色的阴影/轮廓，而不是获得它的彩色版本（例如，我希望轮廓是红色或蓝色）。

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

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

注意：我不想对图像进行着色，而是要对其进行完全着色，使用 CSS 而不覆盖的着色图像中的解决方案很好，但它们在我的情况下不起作用，因为它们所做的是对图像进行着色，因此它的色调不同一种颜色（正如您在我为每个解决方案创建的 JSFiddles 中看到的那样：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>