CSSで背景画像をぼかすには？

/ CSS / By
ショコラ
ショコラ

CSSで背景画像をぼかすには？

サンプルを掲載します。

もっさん先輩
もっさん先輩

↓こんな風に背景画像をぼかしてタイトルを表示することができます。

<html>
<body>
<style>
#title
{
  position: relative;
  z-index: 0;
  overflow: hidden;
}
#title:before
{
  content: '';
  position: absolute;
  z-index: -1;

  /* ぼかしで調整してください */
  filter: blur(4px);
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;

  /* 背景画像を調整してください */
  background-image: url('https://answorz.com/wp-content/uploads/2023/03/Screenshot_20230325_085823-640.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
<div id="title" style="text-align:center; display: table-cell; vertical-align: middle; width:500px; height:300px; color:#000;">
  <h1 style="color:#FFF;">タイトル</h1>
</div>
</body>
</html>

以上

Scroll to Top