ホーム>Web デザインのチュートリアル>CSS チュートリアル

CSS はフィルターと背景フィルターを使用してガウスぼかし効果を実現します (サンプル コード)

著者：Eve Cole 更新時間：2024-12-20 16:54:18

背景

今日、ガウスぼかし効果を使用してページをぼかしたいというリクエストを受け取りました。この機会に、CSS3 のガウスぼかしの 2 つの API を整理しました。

APIの紹介

フィルター

例証します:
この API は、ガウスぼかしだけでなく、カラー オフセット、彩度、グレースケールなどの他の多くのことを実現できるフィルターです。

文法：

 // 複数のフィルターを区切るにはスペースを使用します。 filter: none;
//ガウスぼかしフィルター: Blur(4px);
//線形輝度フィルター:brightness();
// コントラストフィルター:contrast();
// 影効果フィルター:drop-shadow();
//グレースケールフィルター: greyscale();
// 色相回転フィルター: hue-rotate();
//画像フィルタを反転: invert();
//透明度フィルターを変換: opacity();
// 彩度フィルター: saturate();
// 茶色のフィルター: セピア();
// SVG フィルター filter: url();

そのうちの 1 つはガウスぼかしfilter: blur();

背景フィルター

例証します:
要素を作成してこの属性を追加すると、要素の背後の領域に効果 (ぼかしやカラーシフトなど) が追加されます。

対比：
filter 属性は画像または背景画像にロードする必要がありますが、background-filter は要素である必要があるだけです。

文法：

背景フィルター: ぼかし(2px);
背景フィルター: 明るさ(60%);
背景フィルター: コントラスト(40%);
背景フィルター: ドロップシャドウ(4px 4px 10px ブルー);
背景フィルター: グレースケール(30%);
背景フィルター: 色相回転(120度);
背景フィルター: 反転(70%);
背景フィルター: 不透明度(20%);
背景フィルター: セピア(90%);
背景フィルター: 飽和(80%);

例

フィルターの例 1

 <!DOCTYPE html>
<html lang="ja">
  <頭>
    <スタイル>
      .wrapBox2 {
        幅: 800ピクセル;
        高さ: 300ピクセル;
        オーバーフロー: 非表示;
        位置: 相対的;
        背景画像: url("./win.jpeg");
        背景サイズ: 100% 100%;
        背景リピート: リピートなし;
        フィルター: ぼかし(10px);
      }
      .subBox {
        位置: 絶対;
        幅: calc(100% - 100px);
        高さ: calc(100% - 100px);
        z インデックス: 2;
      }
      。文章 {
        位置: 相対的;
        /* z インデックス: 10;
        フォントサイズ: 40px;
        フォントの太さ: 太字;
        色: #f00;
      }
    </スタイル>
  </head>
  <本文>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">すべてをぼかし</div>
    </div>
  </body>
</html>

ここで注意すべき点は、ぼかしを追加した後、周囲のバリ効果により、実際のサイズが設定した幅と高さを超えることです。レイヤーを外側にラップして、 overflow: hidden;を設定できます。

フィルタの例 2

 <!DOCTYPE html>
<html lang="ja">
  <頭>
    <スタイル>
      .wrapBox2 {
        幅: 800ピクセル;
        高さ: 300ピクセル;
        /* オーバーフロー: 非表示;
        位置: 相対的;
      }
      .subBox {
        幅: 100%;
        高さ: 100%;
        位置: 絶対;
        幅: calc(100% - 100px);
        高さ: calc(100% - 100px);
        z インデックス: 2;
        フィルター: ぼかし(10px);
      }
      。文章 {
        位置: 相対的;
        /* z インデックス: 10;
        フォントサイズ: 40px;
        フォントの太さ: 太字;
        色: #f00;
      }
    </スタイル>
  </head>
  <本文>
    <div class="wrapBox2">
      <img src="./win.jpeg" class="subBox" />
      <div class="text">すべてをぼかし</div>
    </div>
  </body>
</html>

このように、テキストと画像が同じレベルにあるため、テキストがぼやけることなく、テキストは画像の下または画像の上に配置されます (z-index に従って制御されます)。

背景フィルターの例 1

 <!DOCTYPE html>
<html lang="ja">
  <頭>
    <スタイル>
      .wrapBox2 {
        幅: 800ピクセル;
        高さ: 300ピクセル;
        オーバーフロー: 非表示;
        位置: 相対的;
        背景画像: url("./win.jpeg");
        背景サイズ: 100% 100%;
        背景リピート: リピートなし;
      }
      .subBox {
        位置: 絶対;
        幅: calc(100% - 100px);
        高さ: calc(100% - 100px);
        z インデックス: 2;
        背景フィルター: ぼかし(10px);
        /* 上部: 100ピクセル */
      }
      。文章 {
        位置: 相対的;
        /* z インデックス: 10;
        フォントサイズ: 40px;
        フォントの太さ: 太字;
        色: #f00;
      }
    </スタイル>
  </head>
  <本文>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">部分的にぼかし</div>
    </div>
  </body>
</html>

ご覧のとおり、background-filter 属性は Picture 要素に設定する必要はありませんが、この方法のほうが柔軟だと思います。

要約する

画像をぼかしたいだけの場合は、フィルターを直接使用できます。 HTML ページ/画像の特定の部分をぼかしレイヤーでカバーしたい場合は、background-filter を使用します。

もちろん、backdrop-filter を使用しても、最初のシナリオを満たすことができます。

これで、フィルターと背景フィルターを使用してガウスぼかし効果を実現する CSS に関するこの記事は終わりです (サンプル コード)。さらに関連する CSS ガウスぼかしのコンテンツについては、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。将来的には、downcodes.com をさらにサポートする予定です。

関連記事