【CSS】文字の背景のみ透過させる方法

文字の背景のみ透過させるにはどうしたらいいんだろう？

画像の上に文字を乗せるとき、文字には背景色がある場合があります。

そしてその背景色は透過している場合がありますが、CSSの書き方を間違えると文字も一緒に透過してしまいます。

CSSで透過させる方法は主に2つあり、今回はその違いについて解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

CSSで文字の背景のみ透過させる方法

まずは今回の完成形を見てみます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

画像の上に文字を上下左右中央に表示させる方法については、以下の記事を参照下さい。

今回は主に文字の背景のみを透過させる方法について書いていきます。

文字と背景両方透過（失敗例）

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

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

最初の完成形と比べると背景の透過度は同じですが、同様に文字も透過しています。

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

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

.sample-title  {
  background-color: rgb(0, 0, 255);
  opacity: 0.2;
}

『opacity』の数値は 0.0（透明）から1.0（不透明） まで設定できます。

つまり数値が小さくなるほど透過度が増し、今回は0.2なので元より80%透過していることになります。

しかしこれは.sample-title全てに対して反映されてしまうので、背景色である『background-color』だけでなく文字も透過してしまいます。

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

文字の背景のみ透過

それでは先ほどの失敗例とCSSの違いを見てみます。

/* 失敗 */
.sample-title  {
  background-color: rgb(0, 0, 255); /* rgbの場合 */
  background-color: #0000ff; /* 16進数の場合 */
  opacity: 0.2;
}

/* 成功 */
.sample-title  {
  background-color: rgba(0, 0, 255, 0.2);
}

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

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

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

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

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

それではRGBの後にある『A』は何のことでしょうか？

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

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

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

まとめ

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

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

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

ちなみにrgb(0, 0, 255)と#0000ffは16進数かRGBかの違いで色は同じです。

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

RGBと16進数カラーコードの相互変換ツール

また、RBGAについては以下の記事で詳しく解説しています。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！