欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS使用filter和backdrop-filter實現(xiàn)高斯模糊效果(示例代碼)

  發(fā)布時間：2024-09-26 15:40:30   作者：Lvan的前端筆記   我要評論
本文詳細介紹了CSS3中的兩個實現(xiàn)高斯模糊效果的API：filter和backdrop-filter,filter可以直接在圖像或背景圖上添加多種效果,而backdrop-filter則用于在元素后的區(qū)域添加效果,更加靈活,示例代碼展示了如何在不同情境下應用這兩種方法,提供了全局模糊和部分模糊的實現(xiàn)方式

背景

今天接到一個需求是，使用高斯模糊的效果對一個頁面進行模糊處理，正好借這個機會來整理一下 css3 中高斯模糊的兩個 API

API介紹

filter

說明：
該 API 是一個過濾器，不僅能實現(xiàn)高斯模糊，還有很多比如顏色偏移、飽和度、灰度等等

語法：

// 使用空格分隔多個濾鏡
filter: none;
// 高斯模糊
filter: blur(4px);
// 線性亮度
filter: brightness();
// 對比度
filter: contrast();
// 陰影效果
filter: drop-shadow();
// 灰度
filter: grayscale();
// 色相旋轉(zhuǎn)
filter: hue-rotate();
// 反轉(zhuǎn)圖像
filter: invert();
// 轉(zhuǎn)換透明度
filter: opacity();
// 飽和度
filter: saturate();
// 褐色
filter: sepia();
// SVG濾鏡
filter: url();

其中高斯模糊 filter: blur();

backdrop-filter

說明：
當你創(chuàng)造一個元素加上這個屬性后，會使得這個元素后面的區(qū)域添加效果（如模糊或顏色偏移）

對比：
filter 屬性必須要加載圖像上或者背景圖上，而 backdrop-filter 只要是一個元素就可以。

語法：

backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

示例

filter例一

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapBox2 {
        width: 800px;
        height: 300px;
        overflow: hidden;
        position: relative;
        background-image: url("./win.jpeg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        filter: blur(10px);
      }
      .subBox {
        position: absolute;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        z-index: 2;
      }
      .text {
        position: relative;
        /* z-index: 10; */
        font-size: 40px;
        font-weight: bold;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">全部模糊</div>
    </div>
  </body>
</html>

這里要注意的一點是，添加模糊后，實際的大小會超出我們設(shè)置的寬高，因為周圍的毛邊效果，你可以在外面包一層并設(shè)置 overflow: hidden;

filter例二

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapBox2 {
        width: 800px;
        height: 300px;
        /* overflow: hidden; */
        position: relative;
      }
      .subBox {
        width: 100%;
        height: 100%;
        position: absolute;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        z-index: 2;
        filter: blur(10px);
      }
      .text {
        position: relative;
        /* z-index: 10; */
        font-size: 40px;
        font-weight: bold;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="wrapBox2">
      <img src="./win.jpeg" class="subBox" />
      <div class="text">全部模糊</div>
    </div>
  </body>
</html>

這種方式的話，文字和圖片由于是平級的，所以文字要么在圖片下方，要么在上方（根據(jù)z-index來控制），而不會對文字進行模糊。

backdrop-filter例一

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapBox2 {
        width: 800px;
        height: 300px;
        overflow: hidden;
        position: relative;
        background-image: url("./win.jpeg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .subBox {
        position: absolute;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
        z-index: 2;
        backdrop-filter: blur(10px);
        /* top: 100px; */
      }
      .text {
        position: relative;
        /* z-index: 10; */
        font-size: 40px;
        font-weight: bold;
        color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="wrapBox2">
      <div class="subBox"></div>
      <div class="text">部分模糊</div>
    </div>
  </body>
</html>

可以看到，backdrop-filter 屬性不必設(shè)置在一個圖片元素上面，而是任何元素上面就行，這種方式我覺得更加靈活

總結(jié)

  • 如果只是模糊一張圖片，那么直接用 filter 就可以實現(xiàn)。
  • 如果想要用一個模糊蒙層蓋住html頁面/圖片的某一部分，那么使用 backdrop-filter。

當然，使用 backdrop-filter 也可以滿足第一種場景。

到此這篇關(guān)于CSS使用filter和backdrop-filter實現(xiàn)高斯模糊效果(示例代碼)的文章就介紹到這了,更多相關(guān)css高斯模糊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論