そんな疑問にお答えします。
背景画像の上にテキストをのせると、色合いによってはかなり見えにくい場合があります。
そういう時にテキストに背景色をつけて可読性を保つという手法はよく用いられます。
たとえば下図のようにです。
ここで「透過だからopacityだな」と思って書いてみると文字まで透明になって失敗します。
僕も最初当然のように失敗しました。
この記事では透過の時のCSSの書き方、opacityとrgba()の違いという点にフォーカスします。
透過のデザインを見るとちょっと難しいそうと思いますが、そんなことはありません。
今日からあなたも自由自在に透過を使えるようになりましょう。
opacity
See the Pen
透過☓ by toshi (@toshi78)
on CodePen.
.box {
width: 500px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5c500;
opacity: 0.5;
}上のケースの場合、.boxの背景色に#f5c500、opacityを0.5指定しています。
- opacityとは不透明度を指定するCSS
- aは0が透明、1が不透明
opacityを0.5とは不透明度50%ということになります。
上の場合、背景は透過できています。
しかし、よく見るとテキストも透けてしまっています。
このようにopacityを使うと、その要素が含んでいるところすべて（テキスト、画像等）に反映されてしまいます。
つまりopacityで文字の背景だけ透過させることはできない、ということです。
rgba()
See the Pen
透過◯ by toshi (@toshi78)
on CodePen.
文字の背景だけ透過させる場合はrgba()を使います。
- rgba()は「red（赤）」「green（緑）」「blue（青）」の三原色と「alpha（透明度）」の組み合わせで色を表現するCSS関数
- aは0が透明、1が不透明
.box {
width: 500px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(245,197,0,0.5);
}
.boxの背景色として指定していたカラーコード #f5c500 をrgb()の表記に変換すると rgb(245,197,0,) となります。
そこに半透明にするために「alpha」と追加して rgba(245,197,0,0.5) としています。
カラーコードをrgba()に変換するには無料のツールが楽ちんです。
まとめ ： 文字の背景だけ透過させるならrgba()を使う！
初心者からすると背景の透過って結構むずかしそうに思いますが、実際やってみると意外と簡単です。
opacityとrgba()の違いを理解して、いろんな透過にチャレンジしてみましょう。
投稿者 トシ
コメントを残す