CSS Web制作

【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.

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

あわせて読みたい
【CSS】画像の上に文字を上下左右中央に表示させる方法
【CSS】画像の上に文字を上下左右中央に表示させる方法

続きを見る

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

 

文字と背景両方透過(失敗例)

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

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については以下の記事で詳しく解説しています。

あわせて読みたい
XDなどで良くある8桁のカラーコードの見方と一覧
XDなどで良くある8桁のカラーコードの見方と一覧

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作