今回は「CSSで背景を透過させる方法」について解説します。
背景を透過するデザインはよくあるので、是非この機会に実装方法を理解しておきましょう。
CSSで背景色を透過させる方法について
opacityを使って背景色を透過する方法
完成形はこちらです。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
CSSのopacityを使うことで背景色を透過することが出来ます。
しかしopacityだと背景全体が透過してしまいます。
基本テキストを背景色の上に乗せることが多いので、あまり使わない手法でしょう。
rgbaを使って背景を透過する方法
完成形はこちらです。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
background-colorのrgbaを使うことで、背景色だけを透過させることが出来ました。
背景色を透過する場合もテキストは標準の濃さで表現したいので、rgbaの方が使い勝手が良いですね。
CSSで背景画像だけを透過させる方法について
rgbaを使って背景画像だけを透過する方法
完成形はこちらです。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
まずは親要素のbg3に対して背景画像を指定して、幅と高さを指定します。
そして子要素であるpタグを背景画像と同じ高さと幅を持たせ、そこにbackground-colorのrgbaで薄い背景色を入れます。
そうすることで、画像だけを透過させることが出来ました。
擬似要素とpositionを使って背景画像だけを透過する方法
完成形はこちらです。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
まずは親要素に対して背景画像と幅と高さを指定します。
そして親要素の擬似要素afterに対して、背景画像と同じ幅の薄い背景色を敷きます。
最後にテキストをz-indexで浮かせて透過されないようにしたら完了です。
まとめ
以上が「CSSで背景を透過させる方法」でした。
よく使うコーディング手法なので、是非参考にしてみてください。
