CSSを使用して背景をぼかす方法について紹介します。背景にぼかしを入れることで、ウェブサイトやアプリのデザインをより魅力的にすることができます。
背景をぼかす方法
以下の例を通じて、CSSを使用して背景をぼかす方法を解説します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blurred Background</title>
<style>
.blurry-background {
background-image: url('background-image.jpg');
width: 100%;
height: 100vh; /* 画面の高さいっぱいに広がるように設定 */
background-size: cover; /* 背景画像を要素に合わせてカバーするように設定 */
filter: blur(8px); /* 8pxのぼかしを適用 */
-webkit-filter: blur(8px); /* ブラウザ互換性のためのプレフィックス */
position: fixed; /* 背景がスクロールしないように固定位置に配置 */
z-index: -1; /* 背景を最背面に配置 */
}
.content {
position: relative;
z-index: 1; /* コンテンツを背景よりも前面に配置 */
padding: 20px;
color: white; /* コンテンツの色を白に設定 */
}
</style>
</head>
<body>
<div class="blurry-background"></div>
<div class="content">
<h1>Blurred Background Example</h1>
<p>This is some content on top of a blurred background.</p>
</div>
</body>
</html>
この例では、.blurry-backgroundクラスにbackground-imageプロパティとfilter: blur(8px);を使用して背景画像を設定し、それをぼかしています。.contentクラスには、背景よりも前面に配置されるコンテンツが含まれています。
filter: blur(8px);は、ぼかしの量を調整するための値です。必要に応じて、ぼかしの度合いを変更することができます。また、ブラウザの互換性のために-webkit-filterプロパティも指定しています。
よくある質問（FAQ）
Q. CSSで要素の背景だけを透過させるには？
A. background-color: rgba(r, g, b, 0.5)で背景のみを半透明にします。opacity: 0.5は要素全体（テキスト含む）が透過されます。背景のみ透過ならrgba・hsla・CSS変数での透明度設定を使ってください。
Q. 背景画像を透過するには？
A. background-imageにはopacity相当のプロパティがないため、::beforeでオーバーレイを作るか、画像自体をopacityを持つPNG/WebPにします。またはpositionで画像を重ねてopacityで制御する方法もあります。
Q. CSSのbackdrop-filterで背景をぼかすには？
A. backdrop-filter: blur(10px)で要素の背景にぼかし効果をかけられます。毛りガラス効果（frosted glass）の実装に使われます。背景が透明でないと効果が見えないため、background-color: rgba(…)も設定してください。
まとめ
CSSを使用して背景をぼかすことで、ウェブデザインに深みを与え、魅力的な効果を生み出すことができます。
知っていれば非常に便利な手法ですので、ぜひ自分のウェブサイトやアプリケーションのデザインに活用してみてください。