不透明度について

画像や文字などをセル画のように2枚重ねた時、上の画像や文字を透過させ、半透明にしたい時があります。
そこでいくつかの、透過方法を説明してみます。

使用するサンプル

まず透過のテストをする為に、背景画像、背景色などを設定したHTMLとCSSを用意します。
使用するサンプルの要点は、

• ul要素全体に背景画像を埋め込んでいます。（断崖の画像）
• a要素には背景色「白」と、アイコン画像を埋め込んでいます。

それ以外に見栄えをよくする為に、a要素にはある程度CSSでデザインをしています。

opacityを使った透過

親要素のulに「opacity: 10%;」を埋め込んでみましょう。
すると子要素全てが影響を受けますので、
ul要素の背景画像、a要素のアイコン画像も文字色も背景色もすべて透過されます。

CSSのプロパティ、「opacity」は不透明度で、「100%」が透過しない、「0%」は完全に透明になります。
「opacity: 10%;」を設定すると次のように、かなり薄く透けて見えます。

これを今度は、a要素に設定すると、ul要素の背景画像だけ残ります。

背景色だけ透明にしたい時

では、アイコン画像と文字は今までのままで、背景色だけ透明にしたければどうしたらいいのでしょうか？
a要素をコントロールすると、アイコン画像、背景色、文字すべてが影響を受けてしまいます。

背景色だけ透明にしたい時は、背景色（色）の不透明度を使います。
色の不透明度は大きく2種類あります。

#8桁コードで指定する方法

これまで習った#色コードは6桁でした。
実はこの後ろにさらに2桁追記すると、不透明度を指定する事ができます。

#8桁コードは16進数で記述しますので、完全透明が「00」、透過させたくない場合は「ff」と記述します。
16進数のどの程度の不透明度か解り辛いので、簡単な表を作成しておきます。

16進数とパーセントの対応表
16進数	00	11	22	33	44	55	66	77	88	99	aa	bb	cc	dd	ee	ff
%	0	6	13	20	26	33	40	46	53	60	66	73	80	86	93	100

上記以外に、半透明の「50%」にしたい時は「80」と指定します。

rgba()で指定する方法

rgab()を使った色指定は「background-color: rgb(255, 255, 255);」のように書きます。
rgba()を使うと4つ目に不透明度を指定する事ができます。

この時、「0」から「1」までの小数点で記述する方法と、「0」から「100%」で記述する方法とがあります。
以上の事から、半透明にしたい時は次の3通りの書き方があります。

文字色だけを半透明にしたい時

文字色は「color」で指定しますので背景色と同様です。
「赤色の半透明」にしたい時は、次のいずれかを使用します。