CSSを使用して背景をぼかす方法

CSSを使用して背景をぼかす方法はいくつかあります。以下にいくつかの方法とそれぞれのコード例を示します。

フィルターを使用する方法: CSSのfilterプロパティを使用することで、背景をぼかすことができます。以下はその例です。

.blur-bg {
  background-image: url('背景画像のURL');
  filter: blur(5px); /* ぼかしの強度を調整するには数値を変更します */
}

背景要素としての要素を使用する方法: 背景をぼかすために、別の要素を背景として配置し、その要素をぼかすこともできます。

.blur-bg {
  background: url('背景画像のURL') no-repeat center center fixed;
  background-size: cover;
}
.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px); /* ぼかしの強度を調整するには数値を変更します */
}

ショートハンドプロパティを使用する方法: CSSのbackdrop-filterプロパティを使用することで、背景をぼかすこともできます。ただし、このプロパティは一部のブラウザでサポートされていない場合があります。

.blur-bg {
  background-image: url('背景画像のURL');
  backdrop-filter: blur(5px); /* ぼかしの強度を調整するには数値を変更します */
}

これらは背景をぼかすための一般的な方法のいくつかです。使用する方法は、デザインの要件やブラウザのサポートによって異なる場合があるので、適切な方法を選択してください。また、ぼかしの強度やぼかす要素の選択など、詳細な調整も可能です。