CSS 中透明 PNG 图像的背景色

Question

实际上是否可以在 CSS 中的透明 PNG 图像上应用背景颜色？这是一个例子：

使用CSS，转动这个图像

使用类似这样的 CSS 代码background-color: rgba(0,0,300,.5)

全部都是完整的 CSS（当然还有 HTML）？

谢谢。

Answer 1

您无法使用 来实现此效果background-color，因为应用于覆盖元素的透明背景颜色也始终会影响 PNG 图像的透明部分。

您需要CSS 滤镜 hue-rotate()（将图像颜色旋转为紫色）和brightness()（使图像变暗）：

img {
  filter: hue-rotate(230deg) brightness(60%);
}

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

有关 CSS 过滤器的更多信息，请参阅 MDN 。还有一篇关于 CSS 过滤器的 CSS 技巧的有用文章。