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

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

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

背景

今天接到一個(gè)需求是，使用高斯模糊的效果對(duì)一個(gè)頁(yè)面進(jìn)行模糊處理，正好借這個(gè)機(jī)會(huì)來(lái)整理一下 css3 中高斯模糊的兩個(gè) API

API介紹

filter

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

語(yǔ)法：

// 使用空格分隔多個(gè)濾鏡
filter: none;
// 高斯模糊
filter: blur(4px);
// 線性亮度
filter: brightness();
// 對(duì)比度
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

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

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

語(yǔ)法：

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>

這里要注意的一點(diǎn)是，添加模糊后，實(shí)際的大小會(huì)超出我們?cè)O(shè)置的寬高，因?yàn)橹車拿呅Ч?，你可以在外面包一層并設(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í)的，所以文字要么在圖片下方，要么在上方（根據(jù)z-index來(lái)控制），而不會(huì)對(duì)文字進(jìn)行模糊。

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è)置在一個(gè)圖片元素上面，而是任何元素上面就行，這種方式我覺得更加靈活

總結(jié)

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

當(dāng)然，使用 backdrop-filter 也可以滿足第一種場(chǎng)景。

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

相關(guān)文章

  • CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕批量生產(chǎn)

    這篇文章主要介紹了CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕批量生產(chǎn)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-18

  • CSS中filter屬性的使用詳解

    這篇文章主要介紹了CSS中filter屬性的使用詳解，css3中的filter屬性可以說(shuō)是簡(jiǎn)單易用且強(qiáng)大，filter 屬性定義了元素的可視效果，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
    2018-10-15

  • 微信小程序 CSS filter（濾鏡）的使用示例詳解

    filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。接下來(lái)通過本文給大家介紹微信小程序 CSS filter（濾鏡）的使用示例，感興趣的朋友一起看看吧
    2018-07-06

  • css+filter實(shí)現(xiàn)簡(jiǎn)單的圖片透明效果

    本文給大家介紹的是CSS結(jié)合filter實(shí)現(xiàn)簡(jiǎn)單的圖片透明效果的實(shí)例，主要使用filter的功能對(duì)圖片元素進(jìn)行透明度控制,需要的朋友可以參考下
    2015-01-13

  • css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解

    這篇文章主要介紹了css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面
    2020-09-14

最新評(píng)論