使用 CSS 的彩色剪影答案

【问题标题】：Colored silhouette using CSS使用 CSS 的彩色剪影
【发布时间】：2017-07-20 23:58:31
【问题描述】：

我有以下代码可以生成 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 来做我想做的事情？怎么可能？

注意：我不想给图像着色，而是让它完全着色，Tint image using CSS without overlay 中的解决方案很好，但在我的情况下它们不起作用，因为它们所做的是给图像着色，所以它是不同的色调一种颜色（正如您在我为每个解决方案创建的这个 JSFiddles 中看到的那样：1、2、3、4），当我想要的是像这样的纯色轮廓时一：

【问题讨论】：

Tint image using CSS without overlay的可能重复
我编辑了问题以添加对Tint image using CSS without overlay 的答案如何无法满足我的要求的描述。我不想给图像着色，而是让它成为纯色剪影。
明白。我已经删除了我的重复投票，但我确实认为您接受的答案与我建议的重复投票中的一个答案几乎相同。
我同意它看起来接近 krs's answer，但过滤器的组合/顺序不一样，结果也很不相似（您可以在此 JSFiddle 上并排看到它们） .

标签： css css-filters

【解决方案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>

【讨论】：

这正是我想要的。然后我可以用hue-rotate 来改变剪影的颜色。谢谢！

【解决方案2】：

您可以通过组合属性 hue-rotate() saturate() 和 brightness() 来做到这一点。

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

参考：How to calculate required hue-rotate to generate specific colour?

#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>

【讨论】：

这不是我想要的，但它确实是一个了不起的技巧。
@AlvaroMontoro 是的，我回答后看到了你的编辑

【解决方案3】：

只需使用可用的Filter property Functions 查看示例 sn-p。

#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>

【讨论】：