にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

テキストの背景色を半透明にしつつ、文字色は不透明にするCSS [CSS3,テキスト,]

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

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

という場合もあるでしょう。文字の読みやすさを重視する場合には、文字そのものは透過しない方が良いかも知れませんから。
例えば、以下のサンプルでは、背景色の緑色は40%ほど透明になっていますが、文字色の青色は不透明(=まったく透過しない青色)になっています。

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

不透明の文字

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

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

半透明の文字

こちらの場合は、背景画像だけでなく文字色の背後も透けて見えていることが分かるでしょう。
このように、「背景色」と「文字色」の2種類の色を指定できるとき、両方を同時に半透明にしたい場合と、片方だけを半透明にしたい場合とがあります。

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

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

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

上記の場合だと、span要素は45%透過して表示されます。背景色の淡い緑色(#ccffcc)も、文字色の青色(blue)も、どちらも背後が透けて見えます。

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

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

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

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

これによって、「背景色は半透明にするものの、文字色は不透明に」できるわけです。
opacityプロパティとRGBAカラーモデルは、一見すると用途が似ているように思えるもののこのような違いがあります。ぜひ、使い分けてみて下さい。

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

《2016/03/15 11:35 改訂》
《2014年6月15日 10:49 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---