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プロパティも指定しています。
まとめ
CSSを使用して背景をぼかすことで、ウェブデザインに深みを与え、魅力的な効果を生み出すことができます。
知っていれば非常に便利な手法ですので、ぜひ自分のウェブサイトやアプリケーションのデザインに活用してみてください。
