玻璃狀（和優雅）的文字效果

Apple Arcade的主頁上有一個很酷的文字效果，一些“白色”文字呈現半透明效果。您可以透過文字看到背景顏色的一部分，這與挖空文字不同，後者會顯示完整的背景顏色。在本例中，下方播放的是動態視頻。這就像先模糊視頻，然後通過字母顯示模糊的視頻一樣。

這正是實際發生的情況。

以下是一個視頻，您可以看到它的實際效果（即使他們在更改頁面後，或者您使用不支持此效果的瀏覽器）：

如果您不喜歡這種效果，也沒關係。本文其餘部分是對其實現方式的技術探討，並非聲明何時以及如何使用它。

這裡有兩個主要屬性必須完美配合才能實現此效果：

1. backdrop-filter
2. clip-path

backdrop-filter屬性非常易於使用。設置它，它可以過濾通過該元素看到的任何背景。

接下來，我們將文本放置在該容器中，但實際上我們會隱藏它。它只需要為了輔助功能而存在。但最終我們會通過使用文本創建剪輯路徑來替換文本。沒錯！我們將在<clippath></clippath>元素內使用SVG<text></text> ，然後用它來剪輯具有backdrop-filter屬性的整個元素。

由於某種原因（我認為這是一個錯誤），Chrome 的渲染效果如下：

即使它據說支持這兩個屬性，它也無法正確剪輯元素。我嘗試使用@supports塊，但這在這裡沒有幫助。看起來Apple 的網站在其元素上有一個.no-backdrop-blur類（Modernizr 風格），該類在Chrome 上設置以完全避免使用該效果。我只是讓我的演示程序崩潰。也許有一天它會得到修復。

在Safari 中看起來很正確：

而Firefox 目前不支持backdrop-filter ，因此@supports塊會執行其操作，並為您提供白色文本。

以上是玻璃狀（和優雅）的文字效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！