Question

我有透明背景的黑色png。

我正在尝试使用hue-rotate（180deg）和反转（100％）CSS来改变颜色但是失败了。

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

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

有可能还是不可能？

Answer 1

不能通过CSS实现。

Answer 2

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

是的，您可以做到。。。黑色很棘手。

方法如下：

background: url(black.png);
filter: brightness(0.9) invert(.7) sepia(.5) hue-rotate(100deg) saturate(200%);

这将使黑色->蓝色。

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

3 个答案: