我有一个透明的彩色PNG图像.我想使用css过滤来使整个图像为白色,但保持透明度不变. 这在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>

首先,brightness(0)会使所有图像变黑,但透明部分除外,它们保持透明.

然后,invert(1)使黑色部分变为白色.

Css相关问答推荐

使用location:stickly将元素固定到其父容器的顶部

与Chrome和Edge相比,背景位置动画在Firefox中运行并不流畅

相对于现有的转换3D应用关键帧动画

为什么我的CSS关键帧动画在循环之间稍微暂停?

使用背景滤镜时,伪元素出现在div之前

Primeng Angular更改p-dialog背景 colored颜色

如何使用Bootstrap将图像水平对齐,使其顶部和底部位于同一水平线上?

CSS 网格 - 具有独立可滚动区域的两列布局

为什么每次加载新页面时我的 React 侧边栏都会抖动?

我怎样才能将我的按钮向上移动,因为文本是

如何禁用亚像素渲染或强制浏览器将属性舍入到最近的像素?

宽度为 x VW 的元素似乎对窗口调整大小没有react

在样式化组件中使图像重叠

圆形加载动画

CSS和 Select 器 - 我可以 Select 具有多个类的元素吗?

如何隐藏锚文本而不隐藏锚?

隐藏元素,但显示 CSS 生成的内容

如何防止内联块 div 换行?

CSS 外边框

我如何*真正*证明 HTML+CSS 中的水平菜单?