CSS 濾鏡 : backdrop-filter

backdrop filter屬性允許我們使用css對元素后面的內容應用過濾效果。

此屬性是定義篩選器屬性的篩選器效果模塊級別1的擴展。它使用與filter屬性相同的語法，但效果將應用於元素的背景。這種影響常見於運行ios7及以上版本的設備接口，以及os x yosemite及以上版本的設備接口。如果沒有這個特性，這種效果只能通過編輯背景圖像本身並應用剪裁和定位技術來實現。

若要使屬性具有任何可見效果，需要從嵌套元素或絕對位置沿Z軸將兩個元素堆疊在一起。另外，應用背景過濾器的元素的背景必須是半透明的。backdrop filter的工作原理是使瀏覽器引擎將目標鎖定在樣式元素后面的內容，而不是元素本身的背景。過濾效果隨后應用於該內容，在最終呈現中，背景與頁面上的其他元素合成。

對元素應用背景過濾器也會創建新的堆疊上下文，就像應用不透明度時一樣。

請注意，使用此屬性可能會對性能產生不利影響，特別是當應用於大量元素或頁面的大區域時，因此應謹慎使用。

 

官方語法

• 語法：

  backdrop-filter: none | <filter-function-list>

• 首字母： 無
• 適用於： 所有元素。在svg中，它應用於沒有<defs>元素和所有圖形元素的容器元素
• 可設置動畫: 是

 

<filter-function-list>

一個空間分隔的過濾函數列表，應用於它們被聲明的順序。下面是可用的篩選器函數列表，它們與篩選器屬性的篩選器功能相同。

 

• blur()
• brightness()
• contrast()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• drop-shadow()
• url()

 

/* 關鍵詞值 */
backdrop-filter: none;

/* SVG 過濾器 */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 過濾器函數 */
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%);

/* 多重過濾器 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

示例

下面是使用“背景過濾器”屬性創建磨砂玻璃效果的簡單示例。標記是一個圖像和一個包含字幕的文本的div。

<div class="container">
  <img src="https://ichef.bbci.co.uk/images/ic/976x549_b/p0121stm.jpg">
  <div class="caption">
    <h3>Morgana</h3>
    <p>played by Katie McGrath</p>
  </div>
</div>

 

標題絕對放置在圖像的底部，背景濾光片應用於它。

.caption {
  padding: 0.5em 1em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px);
  background-color: rgba(255, 255, 255, 0.5);
}

 

最后的效果應該是這樣的：

 

 

文章翻譯自：https://tympanus.net/codrops/css_reference/backdrop-filter/