【CSS】背景画像だけをぼかし、文字をぼかさない方法

オシャレに背景画像をぼかしたいということがあると思いますが、 filter: blur(4px);を背景画像に設定してしまうと、、、

画像の上の文字までぼやけてしまいます。

疑似要素::beforeを使う

必要なコードを記述しておきます。参考にしてください。

 <div class="content">
    <p>sample</p>
  </div>

 .content{
    background: url(../../images/mimi.png);
    height: 500px;
    position: relative;     
    background-position: center;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  .content::before{  //背景画像の疑似要素にぼかしを
      background: inherit;  //重要
      content: '';
      position: absolute;
      filter: blur(5px);  //重要
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      z-index: -1;
  }

画像はぼやけて、文字はくっきり

背景画像だけをぼかしたい時は、背景画像を指定した要素の疑似要素にfilter: blur();を設定する。