图像到阴影（仅限形状） - CSS答案

【问题标题】：Image to a shadow (shape only) - CSS图像到阴影（仅限形状） - CSS
【发布时间】：2016-12-03 21:53:28
【问题描述】：

我有一个这样的 img：example image，我想把它转换成这样的一个 img：example shadow-image。

我尝试了filter: grayscale(100%);，但它只是将颜色转换为灰度，内部形状得以保留。

所以我想将图像中除了透明度之外的所有内容都更改为黑色。我该怎么做？

【问题讨论】：

灰度化后，对比度提升100%以上：developer.mozilla.org/en-US/docs/Web/CSS/filter#contrast()_2
看起来像关闭了，所以我的回答变成了评论使用过滤器，您可以将对比度和亮度降低到0： codepen.io/gc-nomade/pen/ZBrvdL filter:contrast(0%) brightness(0%)
@PraveenKumar filter:contrast(0%) brightness(0%) 足够了，这里不需要画布或其他东西，是吗？
@PraveenKumar，这种情况不是:)，只说和回答过滤器：xx；询问透明度应该保持在哪里；）
@GCyrillus 已经打开了，伙计。

标签： html css filter

【解决方案1】：

使用滤镜，您可以将对比度和亮度降低到 0：

img:hover,
img + img {
  /* black */
  filter: contrast(0%) brightness(0%);
}
img + img:hover {
  /* gray */
  filter: contrast(0%) brightness(100%);
}
img {
  transition: 0.5s
}

<img src="https://i.stack.imgur.com/M4Qup.png" />
<img src="https://i.stack.imgur.com/M4Qup.png" />

这是与http://codepen.io/gc-nomade/pen/ZBrvdL一起玩的codepen

请注意，如果您正在处理的图像有

没有透明度或不能用于形状

是在img上设置的背景色

它不是半透明的 png 或 gif

可以多张图片使用

当透明度属性未知时

那么你可能想看看这个其他问题Silhouette a PNG image using CSS 应该满足你的需求

【讨论】：