不透明度について
画像や文字などをセル画のように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
」で指定しますので背景色と同様です。
「赤色の半透明」にしたい時は、次のいずれかを使用します。
【cssのソースコード】
※8桁のカラーコードを使用した場合です。
【表示サンプル】