解説
透明インデックスカラーは、インデックスカラーの特定の色を、透明としたものです。透明インデックスカラーでは半透明は表現できませんが、「描画しない」という処理だけなので、アルファチャンネルの合成に比べて、高速に画像を合成できます。また、インデックスカラーとして画像を保持することができるので、小さなファイルサイズで画像を作れます。
似たような処理として、特定の色を透明な色として扱う方法があります。黒色や紫色、緑色を抜き色としたり、画像の左上の色を抜き色にしたります。こういった画像や処理は、ゲームの開発では、よく出てきていました。
Web用の画像では、GIFが透明インデックスカラーをサポートしていることで有名です。
サンプル
プログラムではなく、GIFを背景の上に描画することで、透明インデックスカラーを体験してみます。
アルファチャンネルとは違い、半透明ではないので、画像の端の方が目立ちます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>「透明インデックスカラー」のサンプル</title>
</head>
<body>
<div style="background-color: red;
display: inline-block; padding: 16px;">
<img src="8857_img_char.gif">
</div>
<div style="background-image: url('8857_img_back.png');
display: inline-block; padding: 16px;">
<img src="8857_img_char.gif">
</div>
</body>
</html>
