cssのみを使って黒いpng画像の色を変えることは可能ですか？

Question

透明な背景を持つ黒色のpngがあります。

hue-rotate（180deg）とinvert（100％）を使用して色を変更しようとしましたが、失敗しました。

他のカラー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.