CSS过滤器：使具有透明白色的彩色图像

小编典典

CSS过滤器：使具有透明白色的彩色图像

all

我有一个透明的彩色 png 图像。我想使用 css 过滤器使整个图像变白，但保持透明度不变。这在 CSS 中可能吗？

阅读 72

2022-05-30

共1个答案

小编典典

您可以使用

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>

首先，brightness(0)使所有图像变黑，除了透明部分保持透明。

然后，invert(1)使黑色部分变白。

2022-05-30