图像到一个阴影（只有形状） - CSS [英] Image to a shadow (shape only) - CSS

问题描述

我有这样的img：示例图片，我想转换它像这样的img：示例阴影图片。

我尝试了 filter：grayscale（100％）; 但它只是将颜色转换成灰度，内部形状幸存下来。 b

所以我想把除了透明度以外的所有东西都改成黑色。

解决方案

使用过滤器，您可以将对比度和亮度降至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

---

请注意正在处理一个图像

$ b

• 不存在透明度或不用于形状



• p>是在img上设置的背景色



• 它不是一个透明png或者gif




• 当透明度属性未知时，可以使用许多图片




• 
  

那么你可能想看看这个其他问题剪影一个使用CSS的PNG图片应该满足您的需求

I have an img like this: example image and I want to transform it to an img like this: example shadow-image.

I tried filter: grayscale(100%); but it only transformed colors to greyscale, inner shapes survived.

So I want to change everything in image except transparency to black. How can I do it?

解决方案

with filter, you may turn contrast and brightness down to 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" />

here is the codepen to play with http://codepen.io/gc-nomade/pen/ZBrvdL

---

note that if you are dealing with an image where

• there is no transparency or is not to be used for the shape

• is a background color set on img

• it is not a translucide png or gif

• it can be many image used

• when transparency properties are unknown

then you may want to look at this other question Silhouette a PNG image using CSS which should fulfill your needs

这篇关于图像到一个阴影（只有形状） - CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！