CSSでは背景に色や画像を指定することができますが、背景の前面に表示するテキストと背景の組み合わせによっては、どちらかが見ずらくなってしまうことがあります。
そんなときにはCSSで背景色や背景画像を透過することで背景とテキストを見やすくデザインすることができます。
CSSでどのようにすると背景を透過させることができるのか覚えることで、CSSで背景を表現するデザインの幅も広がります。
CSSで背景色を透過させる方法
はじめにCSSで背景色を透過させる方法を覚えたいと思います。背景色を透過させる方法は2つあります。
1つ目はCSSのopacityを使った方法です。
セレクタ{
background-color: #2e2e2e;
opacity: 0.5;
}
opacityはCSSのプロパティです。
背景色を透過させたい要素をCSSのセレクタにして、background-colorで背景色の指定とopacityプロパティを記述し、opacityの値に指定する数値によって適用した背景色の不透明度が決まり透過することができます。
opacityの値には0.0～1.0までの数値を指定することができ、不透明度(透き通る度合い)は数値を低くしていけば背景の透過が薄くなります。
例えば上の画像のような1番上の「background」と表示した黒の背景色のdiv要素をなんちゃってヘッダーとします。
このdiv要素のなんちゃってヘッダーをCSSでごにょごにょとデザインしてopacityプロパティの記述と値を0.5の透明度で透過するとヘッダー要素の背景色は以下の画像のように透過します。
こうして背景色をCSSのopacityで透過した場合に覚えておきたいことは、CSSで指定した要素全てに透過指定が適用されるということです。
<div class="bg_1">background</div>
上のHTMLのdiv要素がCSSのopacityプロパティを記述したボックスですが、要素全体に適用されるので、backgroundという文字も背景色と一緒に透過されます。
そのためCSSでopacityプロパティを使用して背景色を透過させる方法の場合は、透過させる要素全体で透明度を表現したいときの方法として覚えておきます。
背景のみを透過させて文字は透過しないようにする場合は、2つめの方法を使用します。
背景のみ透過して文字は透過しない
opacityで背景を透過するのとは違い、2つ目の方法として背景色をrgba関数で透明度を指定します。CSSで背景のみ透過させて文字は透過させないようにすることができます。
セレクタ{
background-color: rgba(46, 46, 46, 0.7);
color: rgba(227, 179, 29);
}
背景色を透過させたいHTML要素をCSSのセレクタにして、background-colorプロパティの記述をしたら、background-colorにrgba()関数を記述します。
rgba()のカッコの中にはrgbaの数値をカラーモデルでカラー指定します。
セレクタ{
background-color: rgba(r,g,b,a);
}
CSSで背景のみ透過して文字は透過しないようにできるrgbaとは、RGBカラーモデルと呼ばれる色の表現方法の一種に色の透明度を表すalphaを加えたものです。
- rはred(赤)
- gはgreena(緑)
- bはblue(青)
- aはalpha(透明度)
4つの頭文字を合わせてrgba(あーるじーびーえー)です。
上の画像の中でも1番怪しいおっさん「A」が背景の透過に活躍するrgbaのaにあたるalphaさんです。よろしくお願いします。
赤・緑・青には0 ~ 255までの数値を記述することで背景色の指定ができます。透明度には0 ~ 1までの数値を記述することで背景の透過度合いを指定します。
rgbaカラーモデルの色は「rgba 変換」で検索するとカラーコードからrgbaに変換できるツールがたくさん見つかります。使いやすいと思えたツールでrgbaコードにして背景色に指定してください。
Chromeの検証ツールでも簡単かもしれません。
background-colorにrgbaを指定すると背景のみに透過が適用できます。つまり背景の上に表示してる文字は透過しないようにできるというわけです。
上の画像は、CSSでopacityプロパティを指定して背景色を透過させる方法(左)と背景色にrgbaを指定して背景のみ透過して文字は透過しないようにした(右)2つの画像です。
要素全体に適用される透過と背景のみ透過して文字は透過しない違いがわかるかと思います。
このように背景のみ透過して文字は透過しないデザインにしたいときには、CSSでbackground-colorにrgbaを指定して透過させることができるのを覚えておきます。
背景画像を透過させる方法
ここまでCSSで背景色を透過してきましたが、次はCSSで背景画像を透過させる方法を覚えたいと思います。
背景画像を透過させる方法はCSSで透過させる要素の背景をbackground-imageで背景画像を表示します。そして表示した背景画像の透過はbackground: rgba()で指定します。
この2つのCSSプロパティを指定するHTML要素は、背景画像を表示する要素と透過させる要素を別々にした構造にすることで背景画像の透過がやりやすくなります。
<div class="bg_2">
<div class="bg_rgba">
<div class="bg_text">background-image</div>
</div>
</div>
背景画像を透過するHTML構造は上のHTMLのようにdiv要素を3つ用意して、3つのそれぞれのdiv要素にclass属性を付与します。
1番外側のdivが背景画像にする要素
その下のdivが背景画像を透過させる要素
透過させる要素の下のdivが背景画像の上に表示する文字になります。
.bg_2 {
max-width: 600px;
height: 400px;
margin: 0 auto;
background-image: url(img/z.jpg);
background-repeat: no-repeat;
background-position: 40% 20%;
}
.bg_rgba {
height: 100%;
background: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.rgba {
color: darkslateblue;
font-size: 30px;
}
背景画像を透過させるCSSは親要素のdivのクラス名「bg_2」をセレクタにしてbackground-imageプロパティで画像urlを指定し背景画像を指定します。
そして背景画像を透過させるCSSは上のCSSで.bg_rgbaセレクタに記述したbackground: rgba(255, 255, 255, 0.5);の記述で背景画像を透過できます。
またheight: 100%;で親要素のdivのheight: 400px;の高さに合わせられるので、透過させた背景画像の全体を透過できます。
rgbaカラーモデルで255は、カラーコードに変換すると#ffffffの白なので、背景画像に透過する背景の透過色は透明度0.5で透き通った白透過で表示できます。
背景画像を透過させる前の背景画像は以下の画像なので透過具合を見比べて見てください。
背景画像をrgbaで指定して透過させるのではなく、opacityで透過する場合は、background: rgba(255, 255, 255, 0.5);を記述してるrgb関数とカラーモデルの指定を削除して、background-colorプロパティで透過したいカラー指定をしてからopacityで透明度を指定します。
上の画像は背景色をカラーコード#000の黒にしてopacityの値で透明度を0.5で透過した表示です。
opacityの透過は要素に適用されるので背景画像の上に乗った文字も透過されることになります。
背景画像を透過させる方法は、そんなに難しいことではないかと思いますが、覚え方としては先に背景画像を透過しないデザインを完成させて、最後に背景画像を透過させる要素にbackground: rgba();やopacityを記述してあげると覚えやすいかと思いました。
グラデーションで背景画像を透過させる
CSSで背景を透過させるパターンとして、グラデーションで背景画像を透過させる方法も覚えておくとCSSで背景画像をデザインするテクニックの幅が広げられます。
グラデーションで背景画像を透過させる場合には、背景画像を透過させているCSSのセレクタにbackgroundプロパティでlinear-gradientかradial-gradient関数の記述をしてrgbaで透過するカラーの指定と透明度を指定します。
先述した背景画像を透過させる方法で使用したHTML構造を使用して、グラデーションで背景画像を透過させるのを覚えてみます。
<div class="bg_2">
<div class="bg_rgba">
<div class="bg_text">background-image</div>
</div>
</div>.bg_2 {
max-width: 600px;
height: 400px;
margin: 0 auto;
background-image: url(img/z.jpg);
background-repeat: no-repeat;
background-position: 40% 20%;
}
.bg_rgba {
height: 100%;
background:linear-gradient(to top, rgba(0, 232, 248, 0.5) 0%,rgba(210, 210, 211, 0.4) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.rgba {
color: darkslateblue;
font-size: 30px;
}
背景画像を透過させる上のCSSで説明すると.bg_rgbaセレクタに記述したbackground:linear-gradient();の記述でカッコの中にグラデーションする方向とグラデーションカラーを決めて背景画像を透過させています。
この背景画像を透過するlinear-gradient関数は、グラデーションを線状グラデーションにして背景画像を透過できます。
background:linear-gradient(to top, rgba(0, 232, 248, 0.5) 0%,rgba(210, 210, 211, 0.4) 100%);
グラデーションで背景画像を透過するパターンを線状ではなく、円形グラデーションで透過する場合はradial-gradient関数を使います。
background: radial-gradient(circle at 50%, rgba(0, 232, 248, 0.7) 0%,rgba(210, 210, 211, 0.7) 100%);
グラデーションで背景画像をどんなグラデーションパターンで表示したいかは、グラデーションする方向や形状の指定方法を覚えることで背景画像を透過させるパターンを広げられます。
hoverのときに背景色を透過
CSSで背景の色や画像を透過させる方法を覚えるために書いてきた今回の記事もいよいよラストステージです。
hoverのときに背景色を透過する方法を覚えます。まずは今回の説明でさんざん使ってきた下のHTML構造。
<div class="bg_2">
<div class="bg_rgba">
<div class="bg_text">background-image</div>
</div>
</div>
bg_textクラスを付与したdiv要素が透過させた背景画像の上に表示される文字をマークアップしてる要素です。この要素に余白をつけて背景色を白透過させておき、ホバーしたときには透過した背景色を変化できるCSSの書き方。
.bg-text:hover {
background: rgba(255, 255, 0, 0.6);
}
hoverで背景色を透過するには、背景色を透過させてるセレクタ(.bg-text)に擬似クラスhoverを加えたセレクタにして、ホバーしたときにどのような背景色で透過させたいかを指定します。
たとえばbackgroundプロパティにrgbaのカラーモデルを(255, 255, 0, 0.6)にすると、hoverのときに背景色が黄色に変化して0.6の透明度で透過できます。
See the Pen
NWxgMyN by @shu (@-shu-)
on CodePen.
hoverのときに背景色を透過した動きは上のcodepenでbackground-imageという文字にマウスを載せると確認できます。
スマホだとホバー動作わからないと思うのでホバーさせると以下の画像のよう黄色背景が透過します。
まとめ
CSSで背景の色や画像を透過させる方法を覚えられるようにしてきた今回の投稿。
基本的に覚えておきたいのは、「CSSで背景色を透過させる方法」で紹介したopacityを使った方法と「背景のみ透過して文字は透過しない方法」です。
少し慣れてきたら「背景画像を透過させる方法」で背景画像を透過させてみて、「楽勝だぜ！」と思えるようになってきた頃に、背景画像をグラデーションさせたりボタンをホバーしたときに透過したりと透過をいろいろなことと組み合わせていくとCSSを使うデザインが楽しくなるかと思います。
例えばチェック柄にして透過したデザインにしてみるとかやってみたら面白かったです。
