不透明度について

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

使用するサンプル

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

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

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

【htmlのソースコード】

【cssのソースコード】

 

【表示サンプル】

opacityを使った透過

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

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

【cssのソースコード】

【表示サンプル】

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

【cssのソースコード】

【表示サンプル】

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

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

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

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

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

#6桁コードは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通りの書き方があります。

【cssのソースコード】

【表示サンプル】

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

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

 

【cssのソースコード】
※8桁のカラーコードを使用した場合です。

【表示サンプル】

次の記事

rewiteルールについて