画像 + 暗オーバーレイヒーロー
背景写真の上に半透明の暗い層を重ね、その上の白文字を読みやすくする王道のヒーローです。背景は background でグラデーションと画像を重ね、暗いマスクは position:absolute の inset:0 で全面を覆っています。
解説
背景写真の上に半透明の暗い層を重ね、その上の白文字を読みやすくする王道のヒーローです。背景は background でグラデーションと画像を重ね、暗いマスクは position:absolute の inset:0 で全面を覆っています。マスクには backdrop-filter:blur も併用し、写真をわずかにぼかして文字を引き立てます。見出しは clamp() で画面幅に応じて滑らかに拡縮し、CTA ボタンはホバーで少し浮きます。JavaScript は不要です。
使う場面
- コーポレートサイトのトップビジュアル
- ブランドや採用ページの第一印象づくり
- イベント・キャンペーンの告知ヒーロー
調整の要は rgba(15,27,61,.55) のマスク濃度で、写真が明るくて文字が読みにくいときは透明度を上げて暗くします。背景画像の URL を差し替えれば自社写真に変えられます。注意点として、文字と背景のコントラストは十分に確保し、暗幕の濃さで可読性を担保してください。backdrop-filter は一部の古い環境で効かないため、効かなくても読めるよう暗幕の不透明度だけで十分なコントラストになるよう設計するのが安全です。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
写真が明るくて文字が読みにくいときは。
暗いマスクの rgba の最後の数値を 0.55 から 0.7 などへ上げて、覆いを濃くしてください。文字色は白のままでもコントラストが取れて読みやすくなります。
背景の写真を自社のものに変えられますか。
CSS の background で指定している Unsplash の画像 URL を、自社で用意した画像の URL に差し替えるだけで変わります。表示位置は center/cover で自動調整されます。