【CSS】ぼかしフィルターをかけた画像の上に文字を乗っける【Tips】

CSSで画像にぼかしエフェクト（blur）をかけた上で、その画像の上にテキストを乗っけるためのTipsです。
※ぼかしエフェクトはCSS側でかけるため、元画像にかける必要はありません。
　

目次

作るもの

このような物を作ります。

　

HTML

<div class="wrapper style"> 
  <img class="blur style" src="./bg.jpg" alt=""> 
  <div class="text style">Text on image</div> 
</div>

CSS

.wrapper { 
  position: relative; 
} 
.wrapper.style { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 300px; 
  height: 300px; 
} 

.blur { 
  z-index: -1; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 
.blur.style { 
  filter: blur(3px); 
} 

.text { 
  z-index: 1; 
} 
.text.style { 
  color: #ffffff; 
  font-size: 1.5rem; 
  font-weight: bold; 
  text-shadow: 0 0 16px #000000, 0 0 16px #000000; 
}

解説

• 画像とテキストを同改装に配置して双方をラッパー要素で囲い、ラッパー要素にposition: relative;を指定します。
• 画像はwidth: 100%;、height: 100%;、object-fit: cover;とすることで、アスペクト比を保ったまま親要素を覆い尽くすように配置することが可能です。
• 画像にposition: absoluteを指定し、テキスト要素と重ねて表示出来るようにします。z-index: -1で最背面に配置します。
• text 要素にz-index: 1を指定し、最前面に配置します。

備考

CSSの各クラス名+.styleで指定しているスタイルは見た目に関する記述のみなので、画像の上にテキストを重ねるために最低限必要な指定は.styleを除いたスタイルのみとなります。