使用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？怎么可能呢？

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过合并属性frm![Material ID] hue-rotate()和saturate()来实现此目的。

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

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

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%);
}

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>