こんにちは！
opacityを使って背景を透過させようとした場合、文字やボタンまで透過していませんか？
See the Pen YzzmvoR by まるたつ@Webデザイナー目指す🐷 (@marutatsu698) on CodePen.
background-colorの場合はrgbaで回避できますが、background-imageの場合はうまくいきません。
今回はこれを防ぐための3種類の方法を紹介します。
- div要素で囲って、rgbaを使う
- 擬似要素を使う
- background-blend-modeを使う
1.div要素で囲って、rgbaを使う
背景画像を適用しているクラスの中身をdiv要素で囲い、rgbaを適用すれば背景画像のみ透過させることができます。レイヤーを重ねる感じですね。
See the Pen abbeROZ by まるたつ@Webデザイナー目指す🐷 (@marutatsu698) on CodePen.
2.擬似要素を使う
擬似要素にopacityで透過した背景画像を配置する方法です。こちらはHTMLを書き換える必要がなく、CSSのみで可能です。
See the Pen QWWeBbN by まるたつ@Webデザイナー目指す🐷 (@marutatsu698) on CodePen.
3.background-blend-modeを使う
CSSプロパティのbackground-blend-modeで背景画像にオーバーレイ効果をかける方法です。
See the Pen pooMxyM by まるたつ@Webデザイナー目指す🐷 (@marutatsu698) on CodePen.
一番簡単ですっきりしていますが、残念ながらIE, Edgeは未対応です。
IE爆発しろ(^q^)
まとめ
それぞれ一長一短あると思いますが、状況に合わせて使ってみてください。
ちなみに私は2の擬似要素を使っています。
ABOUT ME
