CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

Webサイトのヒーローセクションなどで、背景画像をぼかして奥行きのあるおしゃれなデザインにしたい場面は多くあります。CSSではfilterプロパティのblur()関数を使うだけで、誰でも簡単にぼかし効果を実現できます。この記事では、実際のコード例とともにその実装方法を詳しく解説します。

実装のポイント：背景画像専用の要素を分ける

blur()は指定した要素だけでなく、その中にある子要素（テキストなど）にも適用されてしまいます。そのため、背景画像だけをぼかしたい場合は、背景画像専用の

要素を別途用意し、テキストなどのコンテンツとは分離して配置するのが重要なポイントです。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body,
html {
    height: 100vh;
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
    box-sizing: border-box;
}
.backgroundImage {
    background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
    filter: blur(10px);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.transparentText {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 40%;
    left: 30%;
    width: 50%;
    padding: 20px;
    text-align: center;
}
</style>
</head>
<body>
<div class="backgroundImage"></div>
<div class="transparentText">
<h1>私はShawnです</h1>
<h1>Webデベロッパーです</h1>
</div>
</body>
</html>

コードの解説

  • .backgroundImage：background-imageで表示する画像を指定し、filter: blur(10px)によって10pxのぼかし効果を適用しています。background-size: coverを指定することで、画面サイズに合わせて画像が全体を覆うように表示されます。
  • .transparentText：rgba(0, 0, 0, 0.4)の半透明な黒背景を重ねることで、白いテキストが読みやすくなります。position: absoluteを使い、ぼかした背景画像の上に配置しています。

出力結果

上記のコードを実行すると、次のように表示されます。

CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

  1. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>