テキストの背景だけを透過させる方法

CSS


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

前回は画像の上にテキストを表示させる方法について書きましたが今回は、

テキストの背景だけを透過させるにはどうしたらいいんだろう?

 

 

といった方に対する記事となります。

透過をさせたいシーンは結構あるので、これを覚えておくと使う機会は必ずやってくると思います。

 


今回の完成形

 

まずは今回の完成形を見てみます(スマホで見る場合はResultをタップして下さい)

See the Pen
文字の背景だけ透過
by junpei (@junpei-sugiyama)
on CodePen.

これは前回の記事が元になっていて、前回との主な変更点はテキストの背景に緑色の背景色を付けた点です。

画像の上にテキストを表示させる方法については以下の前回の記事を参考にして下さい。

 

なので今回は主にテキストの背景のみを透過させる方法について書いていきます。

 

テキストと背景両方透過(失敗例)

 

テキストの背景だけ透過させたい時によくある失敗例を見てみましょう。

See the Pen
文字ごと背景を透過
by junpei (@junpei-sugiyama)
on CodePen.


最初の完成形と比べると背景の透過度は同じですが、同様にテキストも透過してしまっているのが分かります。

原因は透過のさせ方の違いになります。

この失敗例では、要素を透過させる opacity というプロパティを使っています。

.top p {
  background-color: #00ff7f;
  opacity: 0.2;
}

 

opacity の数値は 0.0(透明)から1.0(不透明) まで設定出来ます。

数値が小さくなるほど透過度が増します。

今回は0.2なので、元より80%透過していることになります。

しかしこれはpタグ全てに対して反映されてしまうので、背景色である background-color だけでなくテキスト自体も透過してしまいます。

なのでこれを背景色のみ透過させるようにしたいと思います。

 


テキストの背景のみ透過

 

それでは先ほどの失敗例とCSSの違いを見てみます(違う所だけです)

/* 失敗 */
.top p {
  background-color: #00ff7f;
  opacity: 0.2;
}

/* 成功 */
.top p {
  background-color: rgba(0, 255, 127, 0.2);
}

 

まず全体を透過させる opacity はなくなっています。

そして大きな違いは background-color の書き方です。

失敗例ではカラーコードを16進数で書いていますが、成功例では16進数ではなく rgba で書いています。

RGBは何となく聞いた事あるかも知れませんが、光の三原色の事ですね。

RGB ( Red , Green , Blue ) となります。

それではRGBの後にある a は何のことでしょうか?

これが透過度を表す Alpha(アルファ) の頭文字になります。

これもopacityと同じで、数値は 0.0(透明)から1.0(不透明) まで設定出来ます。

そしてこの透過はpタグではなく、pタグの背景色である background-color に対してのみ反映されるので、テキストは透過されません。

それでは最後に完成形をもう一度見てみましょう。

See the Pen
文字の背景だけ透過
by junpei (@junpei-sugiyama)
on CodePen.

これは良く使うのでぜひ覚えておきましょう。

ちなみに #00ff7f と rgba(0, 255, 127) は16進数かRGBかの違いで、色は全く同じです。

16進数とRBGの変換は以下のサイトですぐ出来ます。