Question

我有一个这样的img：example image我希望将其转换为这样的img：example shadow-image。

我尝试了Dictionary<string, object>，但它只将颜色转换为灰度，内部形状幸免于难。

所以我想改变图像中的所有内容，除了透明度为黑色。我该怎么办？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 这是与http://codepen.io/gc-nomade/pen/ZBrvdL

一起玩的codepen

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


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



是img

上设置的背景颜色

它不是translucide png或gif



可以使用很多图像



当透明属性未知时



那么你可能想看一下应该满足你需求的另一个问题Silhouette a PNG image using CSS

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

1 个答案: