すべてのブログから「#オーバーレイ」タグの検索結果

Webサイトのメインビジュアルなどでよく見る、写真の上に文字を重ねるデザイン。おしゃれに見える一方で、「文字が写真に埋もれて読みにくい…」「白文字にしたけど、明るい部分だけ見えない…」ということもよくあります。今回は、そんなときに使える5つの対処法をまとめます。① 写真にオーバーレイをかける一番使いやすいのが、写真の上に半透明の色を重ねる方法です。例えば写真を少し暗くして、その上に白文字を置くと、文字がぐっと読みやすくなります。.hero::before {  content: "";  position: absolute;  inset: 0;  background: rgba(0, 0, 0, 0.3);}ポイントは、暗くしすぎないこと。写真の雰囲気を残しながら調整します。② グラデーションを使う写真全体を暗くしたくない場合は、文字がある部分だけにグラデーションをかける方法もあります。例えば左側に文字があるなら、左側は暗め → 右側に向かって透明にすると自然です。写真を活かしながら、文字もしっかり見せられます。③ 文字色を写真に合わせる「写真の上＝白文字」と決める必要はありません。明るい写真なら黒や濃いグレー、暗い写真なら白など、背景との明るさの差を意識すると読みやすくなります。色そのものだけでなく、明度差を見ることがポイントです。④ 文字の後ろに背景をつけるどうしても写真と文字が重なってしまう場合は、文字の後ろに半透明の背景をつける方法もあります。例えば、CONCEPT私たちについてのようなタイトル部分だけ背景をつけてもOK。デザインのアクセントにもなります。⑤ 最初