テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある

スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)は、opacityプロパティを使えば良いだけです。テキストでも画像でも半透明になります。簡単です。
しかし、その場合は対象の要素の全体が半透明になってしまいます。
テキストを掲載する場合の色指定には主に「背景色」と「文字色」の2つがあります。(他に、枠線色などもありますが。)
このうち、

• 背景色は半透明にして、背後を少しだけ透過させたいが、
• 文字色は不透明にして、背後は透過しないようにしたい

という場合もあるでしょう。文字の読みやすさを重視する場合には、文字そのものは透過しない方が良いかも知れませんから。

例えば、以下のサンプルでは、背景色の緑色は40％ほど透明になっていますが、文字色の青色は不透明(＝まったく透過しない青色)になっています。

▼背景色は半透明だが、文字色は不透明にした例

もし、背景色と文字色の透明度を同じにすると、以下のように見えます。

▼背景色も文字色も合わせて半透明にした例

こちらの場合は、背景画像だけでなく文字色の背後も透けて見えていることが分かるでしょう。

このように、背景色と文字色の2種類の色を指定できるとき、両方を同時に半透明にしたい場合と、片方だけを半透明にしたい場合とがあります。
そこで以下に、それぞれのCSSソースの記述方法を紹介します。

背景色も文字色も合わせて半透明にしたければ、opacityプロパティ

先ほどの例の2つ目のように、背景色も文字色も合わせて半透明にすれば良いなら、opacityプロパティを使って透明度(正確には不透明度)を指定すれば良いでしょう。
例えば以下のようにCSSソースを記述します。

span {
   opacity: 0.55; /* 55％不透明度(＝45％透過) */
   background-color: #ccffcc;
   color: blue;
}

2行目にopacityプロパティを使っています。
上記の場合だと、span要素は45％透過して表示されます。背景色の淡い緑色(#ccffcc)も、文字色の青色(blue)も、どちらも背後が透けて見えます。
opacityプロパティを使った場合は、対象の要素全体に対して透過度の指定が適用されますから、背景色だろうと文字色だろうと全てを含めてこのような表示結果になります。

背景色は半透明にするものの、文字色は不透明にしたいなら、rgba表記

冒頭の例のように、背景色には透明度を指定して背後を透かせつつ、文字色には透明度を指定せずに不透明な色を指定したい場合には、opacityプロパティではなく、色の指定にRGBAカラーモデルを使うと良いでしょう。
例えば以下のようにCSSソースを記述します。

span {
   background-color: rgba( 204, 255, 204, 0.55 );
   color: blue;
}

上記では、2行目で背景色の指定を rgba( 204, 255, 204, 0.55 ) としています。
この意味は、

• R(赤)が、204/255 ( 80％)
• G(緑)が、255/255 (100％)
• B(青)が、204/255 ( 80％)
• A(アルファ)が、0.55 (55％)

です。色の指定と同時に、透明度を表す「アルファチャンネル」も指定できる記述方法です。
0が「完全に透明」で、1が「完全に不透明」で、小数を使って不透明割合を指定できます。
上記の場合はアルファチャンネルに値「0.55」を指定しているので、「55％不透明(＝45％透明)」になります。

さて、上記のCSSソースでは、2行目の背景色(background-colorプロパティ)にのみアルファチャンネルを含むRGBAカラーモデルで色を指定しています。3行目の文字色(colorプロパティ)にはただ「blue」と色名を指定しているだけです。この場合、背後が透過するのは背景色部分だけであって、文字部分の背後は透過しません。なぜなら、文字色の方には不透明度は指定されていないからです。

これによって、「背景色は半透明にするものの、文字色は不透明に」できるわけです。
背景色と文字色の両方をRGBAカラーモデルで指定すれば、例えば「背景色は50％半透明で、文字色は10％だけ透過させる」といった微調整も可能です。

opacityプロパティとRGBAカラーモデルは、どちらも透過させられるという点で一見すると用途が似ているように思えますが、このような違いがあります。ぜひ、使い分けてみて下さい。

※同様の方法で、逆に「背景色は不透明なまま、文字色を半透明にする」こともできますが、その場合、文字色の背後には背景色が見えるだけです。背景色のさらに背後まで透過するわけではありません。

(更新日：2017年06月25日)