Web制作 CSS

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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桁のカラーコードの見方と一覧

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS