是否可以使用CSS来改变黑色PNG图像的颜色？

Question

我有黑色png与透明背景。

我想改变颜色使用色调旋转（180度）和颠倒（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更改背景颜色，使其基于某些操作变得更加或不透明。

#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.

这里有一个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.