2019/06/05「背景に画像を敷いてその上にテキストを載せる」というデザインにする際、画像の内容によっては目線がテキストより画像に持っていかれることがあったりします。画像に目線が行くのが正解であればいいんですが、テキストを生かしたいときには、画像をぼかしてあげるといい効果になることもあるので、画像を加工することなくCSSだけで背景に敷いた画像をぼかす方法をご紹介します。背景に画像を敷いたデザインを作る時に、その画像自体をフォトショなどで加工することなくCSSで調整できると手軽でいいんですよね。今回紹介する方法はIEには対応してませんが、ChromeやSafariなどの主要ブラウザでは問題なく使えます。画像をぼかさない」の違いだけなので、まぁ問題ないことが多いと思いますが、気になるようでしたら画像自体を加工して対応するようにしてください。汎用性が高まるように、画像の中央にテキストを配置するような実例でご紹介しますね。画面いっぱいに画像を敷いて、その中央にテキストを載せてます。こちらは背景画像をぼかす前。text=”ちなみに、画面いっぱいに画像を敷く方法については下記の記事をご覧ください。”]CSSで画像を画面いっぱいに広げたデザインを作るには?パソコンでもスマホでも背景画像を全画面表示しよう!続きを読むそして背景に敷いた画像をぼかしたのがこちら。HTMLはこのようなシンプルな構造で大丈夫です。<p>テキストがここに入ります。</p></div>そして背景画像をぼかすCSSがこちら。上記のCSSからは「テキストを中央に配置する」という記述を省いてます。テキストを上下左右中央寄せするには、下記の3行を追記してください。続きを読む最後に背景画像を暗くする方法も便利なんですが、ぼかすのも便利ですよね。暗くする方法と組み合わせるとより使い勝手が良いので、こちらもぜひご覧ください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。