2019/06/05背景に画像を敷いてその上にテキストを載せるデザインをする際、テキストを読みやすくするために画像を暗くしたい場合があります。そのために画像を作り直すのもめんどくさいので、CSSだけで画面を暗くする方法をご紹介します。背景画像をCSSだけで暗くする方法テキストを中央に配置するには背景画像を全画面表示するには最後に背景画像をCSSだけで暗くする方法まずこちらをご覧ください。テキストを中央に配置してますが、背景の画像が明るくて上に載せたテキストが読みにくいですね。CSSで背景に敷いた画像を暗くしてみました。これでテキストが読みやすくなりました。厳密には「背景画像の上に黒い色を半透明化したものを載せた」状態ですが、テキストが一瞬で読みやすくなりました。いうわけで、まずHTMLの記述例から。<p>テキストがここに入ります。</p></div>そしてCSSはこんな感じ。0;}これで背景画像が暗くなりました。テキストを中央に配置するにはテキストを中央に配置する方法については上記のソースで省いてますので、下記の3行を追記してください。続きを読む背景画像を全画面表示するにはそもそも背景画像を全画面表示する方法がわからないという方は、こちらの記事をご覧ください。CSSで画像を画面いっぱいに広げたデザインを作るには?パソコンでもスマホでも背景画像を全画面表示しよう!続きを読む最後に個人的にはかなり便利で多用しているテクニックです。画像加工し直さないで済むのがとにかく楽なんですよ。合わせて使うと便利なCSSだけで画像をぼかす方法はこちらをどうぞ。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。