使用CSS的彩色轮廓
我有以下代码来生成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)，而我想要的是像这样的纯色轮廓：
回答 3
Stack Overflow用户
发布于 2017-03-01 23:25:28
您可以将对比度设置为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>
Stack Overflow用户
发布于 2017-03-01 23:48:34
您可以通过组合属性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>
Stack Overflow用户
发布于 2017-03-02 00:01:13
只需使用可用的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>
https://stackoverflow.com/questions/42535432
复制相似问题
腾讯云开发者
