本教程探討了CSS backdrop-filter屬性，提供了增強(qiáng)現(xiàn)代用戶界面的實(shí)用技術(shù)。了解如何將背景過(guò)濾器分層多個(gè)元素分層，並將它們與其他CSS視覺(jué)效果相結(jié)合以創(chuàng)建複雜的設(shè)計(jì)。

以下是使用所述技術(shù)可以實(shí)現(xiàn)的一些示例。在整篇文章中將顯示更多示例。

目前，模糊，磨砂的玻璃效果非常受歡迎 - 也許是由於有關(guān)該主題的最深入的文章 - 因此，我們將其用作示例的基礎(chǔ)。但是，討論的原則適用於任何相關(guān)過(guò)濾器。我們還將探索其他一些過(guò)濾器類(lèi)型。

了解背景過(guò)濾器

如果您熟悉blur()和brightness()等CSS過(guò)濾器功能， backdrop-filter功能將是直觀的。他們使用相同的功能。 CSS-Tricks和MDN上提供了全面的支持過(guò)濾功能的列表。

filter和backdrop-filter之間的關(guān)鍵區(qū)別在於它們的影響。 backdrop-filter會(huì)修改元素的背景，需要透明或半透明的背景才能可見(jiàn)。這對(duì)於：

1. 實(shí)現(xiàn)所需的美學(xué)。
2. 跨多個(gè)元素分層過(guò)濾器。
3. 將過(guò)濾器與其他CSS效應(yīng)相結(jié)合。

增強(qiáng)背景

雖然設(shè)計(jì)是主觀的，但一些指導(dǎo)很有幫助。如果簡(jiǎn)單的背景上的簡(jiǎn)單模糊過(guò)濾器看起來(lái)不令人滿意，請(qǐng)考慮添加諸如陰影之類(lèi)的增強(qiáng)功能，或者更常見(jiàn)的是豐富背景本身。

可以使用brightness() ， contrast()和invert()等過(guò)濾器來(lái)改善平原背景，這些過(guò)濾器會(huì)操縱光度和色調(diào)，從而創(chuàng)造出視覺(jué)上吸引人的結(jié)果。紋理的背景通常與blur()和opacity()等扭曲過(guò)濾器搭配得很好。

<main><div>
  <h1>今天的天氣</h1>
    多云有肉丸的機(jī)會(huì)。下午3點(diǎn)持續(xù)十分鐘。
  </div>
</main>

主要的 {
  背景：中心/封面URL（“ image.jpg”）;
  盒子陰影：0 0 10px RGBA（154、201、255、0.6）;
  /* ETC。 */

  div {
    背景過(guò)濾器：Blur（10px）;
    顏色：白色；
    /* ETC。 */
  }
}

帶有背景過(guò)濾器的分層元素

如前所述， backdrop-filter需要透明或半透明的背景來(lái)顯示其背後的背景。

當(dāng)將多個(gè)元素與backdrop-filter分層時(shí)，將除了Bottommost元素半透明劑（不完全透明）以外的所有元素時(shí)。底部元素可以是透明的，也可以是半透明的，只要它具有背景。否則，將不會(huì)可見(jiàn)過(guò)濾器的堆積。

<main><div>
  <h1>今天的天氣</h1>
    多云有肉丸的機(jī)會(huì)。下午3點(diǎn)持續(xù)十分鐘。
  <p>查看詳細(xì)信息</p>
</div>
</main>

主要的 {
  背景：中心/封面URL（“ image.jpg”）;
  盒子陰影：0 0 10px RGBA（154、201、255、0.6）;
  /* ETC。 */

  div {
    背景：RGBA（255、255、255、0.1）；
    背景過(guò)濾器：Blur（10px）;
    /* ETC。 */

    p {
      背景過(guò)濾器：亮度（0）對(duì)比度（10）;
      /* ETC。 */
    }
  }
}

將背景過(guò)濾器與其他CSS效果相結(jié)合

具有過(guò)濾器效果的元素（來(lái)自filter和background-filter ）創(chuàng)建了“背景根”（儘管尚未標(biāo)準(zhǔn)化術(shù)語(yǔ)）。 backdrop-filter與其他使用背景根的效果很好地搭配，因?yàn)樗鼈兌加绊懥讼嗤谋尘啊?/p>

兩個(gè)特別有趣的效果是mask和mix-blend-mode 。帶有mask的backdrop-filter在我們的測(cè)試中的主要瀏覽器中產(chǎn)生了最一致的結(jié)果。與mix-blend-mode結(jié)合有時(shí)會(huì)掩蓋模糊效果，因此我們不會(huì)在示例中使用它，但是鼓勵(lì)實(shí)驗(yàn)。

帶蒙版的背景過(guò)濾器

與backdrop-filter不同， mask會(huì)影響元素的背景和前景。這可以利用以實(shí)現(xiàn)特定效果。

<main><div>
    <div class="bg"></div>
    <h1>今天的天氣</h1>
      多云有肉丸的機(jī)會(huì)。下午3點(diǎn)持續(xù)十分鐘。
    </div>
</main>

主要的 {
  背景：中心/封面URL（“ image.jpg”）;
  盒子陰影：0 0 10px RGBA（154、201、255、0.6）;
  /* ETC。 */

  > div {
    .bg {
      背景過(guò)濾器：Blur（10px）;
      掩模圖像：重複線性畢業(yè)生（90度，透明，透明2PX，白色2PX，白色10px）;
      /* ETC。 */
    }
    /* ETC。 */
  }
}

前景的背景過(guò)濾器

filter屬性將效果應(yīng)用於元素的前景，在這種情況下，不必要的backdrop-filter 。但是，如果您需要在排除某些內(nèi)部元素的同時(shí)將過(guò)濾器應(yīng)用於前景元素， backdrop-filter是一種解決方案。

<main><div class="photo">
    <div class="filter"></div>
  </div>
</main>

。照片 {
  背景：中心/封面URL（“ photo.jpg”）;

  。篩選 {
    背景過(guò)濾器：Blur（10px）亮度（110％）；
    面具圖像：徑向梯度（白色5px，透明6px）；
    面具大?。?0px 10px;
    過(guò)渡：背景過(guò)濾器.3s線性；
    /* ETC。 */
  }

  ＆：Hover .Filter {
    背景過(guò)濾器：無(wú)；
    面具圖像：無(wú)；
  }
}

在上面的示例中懸停在模糊的照片上，以查看效果。

有許多創(chuàng)新的方法可以使用CSS backdrop-filter 。請(qǐng)記住，使用半透明元素將過(guò)濾器分層，並嘗試將其與其他CSS背景影響的特性相結(jié)合。前面顯示的最初的UI設(shè)計(jì)應(yīng)激發(fā)您自己的創(chuàng)作。

進(jìn)一步閱讀

• 背景濾波器（CSS-ricks）
• 背景過(guò)濾器（MDN）
• 背景根（CSS過(guò)濾效果模塊2）
• 過(guò)濾功能（MDN）

（注意：用指向相關(guān)資源的實(shí)際鏈接替換包圍的鏈接佔(zhàn)位符。）

以上是使用CSS背景過(guò)濾器進(jìn)行UI效果的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！