あなただけのオリジナルデザイン！CSSフィルターで魅せるWebサイト

2024-04-02

CSSフィルターを背景画像に適用する方法

必要なもの

HTMLファイル
CSSファイル

手順

背景画像を設定したい要素に background-image プロパティを使って、画像ファイルを指定します。

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

filter プロパティを使って、適用したいフィルターを指定します。

.container {
  background-image: url(image.jpg);
  background-size: cover;
  /* ここにフィルターを記述 */
}

使用可能なフィルター

blur(): ぼかし効果
brightness(): 明るさ調整
contrast(): コントラスト調整
grayscale(): モノクロ化
hue-rotate(): 色相回転
sepia(): セピア調
saturate(): 彩度調整

これらのフィルターは、単独で使うだけでなく、組み合わせて使うこともできます。

例

以下は、ぼかしとモノクロ効果を組み合わせた例です。

.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: blur(5px) grayscale(1);
}

注意点

古いブラウザでは、すべてのフィルターがサポートされていない場合があります。
フィルターの使いすぎは、ページの表示速度を遅くする可能性があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>タイトル</h1>
    <p>本文</p>
  </div>
</body>
</html>

.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: blur(5px) grayscale(1);
}

このコードを保存してブラウザで開くと、背景画像がぼかされ、モノクロ化されていることが確認できます。

その他のサンプル

背景画像を明るくする

.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: brightness(1.2);
}

背景画像のコントラストを上げる

.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: contrast(1.5);
}

背景画像をセピア調にする

.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: sepia(1);
}

これらのコードを参考に、さまざまなフィルターを組み合わせて、オリジナルの表現を試してみてください。

CSSフィルターを背景画像に適用する他の方法

background-filter プロパティは、背景画像にのみフィルターを適用するために使用されます。filter プロパティと同様に、さまざまなフィルターを指定することができます。

.container {
  background-image: url(image.jpg);
  background-size: cover;
  background-filter: blur(5px) grayscale(1);
}

SVGフィルターを使用して、より複雑な効果を背景画像に適用することができます。SVGフィルターは、XMLファイルとして記述されます。

<svg id="filter">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" />
</svg>

```css
.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: url(#filter);
}

CSS変数を使用して、フィルターの値を動的に変更することができます。

:root {
  --blur: 5px;
  --grayscale: 1;
}

.container {
  background-image: url(image.jpg);
  background-size: cover;
  filter: blur(var(--blur)) grayscale(var(--grayscale));
}