CSS滤镜：使透明白色的彩色图像 [英] CSS filter: make color image with transparency white

问题描述

我有一个有透明度的彩色png图像。我想使用css过滤器，使整个图像为白色，但保留透明度，因为它是。
在CSS中是否可能？

I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is. Is that possible in CSS?

推荐答案

您可以使用

filter: brightness(0) invert(1);

html {
  background: red;
}
p {
  float: left;
  max-width: 50%;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
}
.filter {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

<p>
  Original:
  <img src="http://i.stack.imgur.com/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" />
</p>

首先，亮度（0）

然后， invert（1）使黑色部分变白。

Then, invert(1) makes the black parts white.

这篇关于CSS滤镜：使透明白色的彩色图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！