ルイログのタイトル箇所の背景画像はアイキャッチ画像が使われているのですが、この箇所でも利用されているテクニック。
通常のクッキリの画像にCSSでぼかしをかけ、上にテキストを乗せてもテキストが普通に見えるようになります。
CSSだけで背景画像をぼかす方法をコピペで使える形で紹介します。
サイトトップ上部を画面いっぱいの画像を敷いてテキストを乗せたりとか、ルイログのようなページのタイトル箇所の背景に画像を設定してテキストを乗せたりとか、結構色んな所で画像の上にテキストを乗せるっていうことしますよね。
でも、画像そのままの上にテキストを乗せるとどうしても画像の方に目が行ったり、テキストが読みづらかったりしますよね。
そういうときに活用できるCSSが、「filter: blur( );」です！
filter: blur( ); を利用して画像をぼかす
まずはCSSで画像をぼかす前の画像（別記事の使い回しですいません）
こちらの画像をcssでぼかします！
こちらがCSSで画像をぼかした後。
だいぶボケましたね！
これに、テキストを縦横センタリングして配置します。
こんな感じです。
HTMLはいたってシンプル。
<div class="contents-frame">
<p class="text-zone">テキストはここへ入力</p>
</div>これだけです。
class=”text-zone” でテキストのサイズや色等を調整しています。
CSSはこちら。
/*画面いっぱいに画像を配置*/
.contents-frame {
background-attachment: fixed;
background-image: url(画像URLをここに);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
width: 100%;
/*中に入るもの（テキスト）を縦横中央に配置*/
display: flex;
align-items: center;
justify-content: center;
}
/*ぼかし＆微調整*/
.contents-frame::before {
background: inherit;
content: '';
filter: blur(6px);
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
}
/*テキストを大きく、白い太文字に*/
.contents-frame .text-zone{
position:absolute;
font-size:2.8rem;
color:#fff;
font-weight:bold;
}少し解説の文字も入れてみました。
cssに少し精通している方は説明文である程度わかるかな？と思いますが、画像をぼかすの自体は「filter: blur();」です！
blur＝英語でぼかしという意味ですね。
数値を少なくしたらぼかしが薄く、数値を大きくしたらぼかしが強くなっていきます。
CSSだけで背景画像をぼかす方法についてまとめ
「filter」CSS、とっても便利ですね！
ちょっとした時に仕込んでおけば使える便利CSS。
今回コピペは画面いっぱいに画像を置くときのもので用意しましたが、使いやすいコードだと思うので是非使ってみてください！
合わせて使うと超便利！
関連・応用
CSSだけで画像を暗くする方法
応用技: CSSだけで画像を暗くしてぼかす方法
良きWEBデザインをっ！