画像の上に文字を乗せるとき、文字には背景色がある場合があります。
そしてその背景色は透過している場合がありますが、CSSの書き方を間違えると文字も一緒に透過してしまいます。
CSSで透過させる方法は主に2つあり、今回はその違いについて解説していきます。
CSSで文字の背景のみ透過させる方法
まずは今回の完成形を見てみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
画像の上に文字を上下左右中央に表示させる方法については、以下の記事を参照下さい。
-
【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の変換は以下のサイトですぐ出来ます。
また、RBGAについては以下の記事で詳しく解説しています。
-
XDなどで良くある8桁のカラーコードの見方と一覧
続きを見る
以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
