是否可以使用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.