是否可以仅使用css更改黑色png图像的颜色？

I have black color png with transparent background.

我有透明背景的黑色png。

I am trying to change color using hue-rotate(180deg) and invert(100%) CSS but failed.

我试图使用hue-rotate（180deg）改变颜色并反转（100％）CSS但是失败了。

In the case of other color png, all is good.

在其他颜色png的情况下，一切都很好。

.huerotate{-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
<img src="blackXXX.png" class="huerotate"/>

Is it possible or impossible?

有可能还是不可能？

2 个解决方案

#1

no its not possible through CSS.

没有它不可能通过CSS。

#2

No, you cannot change the color of an image using CSS.

不，您无法使用CSS更改图像的颜色。

However, if you can take the information you know about the png, you can create a transparent background color using just rgba() or hsla() in CSS (if the background is a purely solid image).

但是，如果您可以获取有关png的信息，则可以使用CSS中的rgba（）或hsla（）创建透明背景颜色（如果背景是纯实心图像）。

Here is a simple black background that is 50% see-through. The nice part about this is that you can change the background-color via Javascript to make it more or less opaque based on some actions.

这是一个简单的黑色背景，50％透视。关于这一点的好处是你可以通过Javascript更改背景颜色，使其基于某些操作或多或少不透明。

#transparent {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: absolute;
  top: 0;
  left: 10px;
}
.transparent-container {
  background-color: white;
}

<div id="transparent">
  <div class="transparent-container">
    Fore ground text
  </div>
</div>
Other text other text.

Here is a 50% see-through blue background

这是一个50％的透明蓝色背景

#transparent {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 255, 0.5);
}
.transparent-container {
  background-color: white;
}

<div id="transparent">
  <div class="transparent-container">
    Foreground text
  </div>
</div>
This is text in the background.

#1