最近，我遇到了一個(gè)很酷的效果，稱(chēng)為運(yùn)球鏡頭。我的第一個(gè)想法是，如果我只用一些表情符號(hào)在圖標(biāo)中使用一些表情符號(hào)而不會(huì)浪費(fèi)時(shí)間在svg上，我可以在幾分鐘內(nèi)迅速重新創(chuàng)建它。

對(duì)於那些“幾分鐘”，我再錯(cuò)了 - 他們最終變得瘋狂而令人沮喪地刮擦了這種癢！

事實(shí)證明，儘管有關(guān)於如何進(jìn)行這種效果的資源，但他們都假定覆蓋層是矩形或最多是帶邊框拉迪烏斯的矩形的非常簡(jiǎn)單的情況。但是，對(duì)圖標(biāo)等不規(guī)則形狀（這些圖標(biāo)是表情符號(hào)還是適當(dāng)?shù)腟VG）的形狀產(chǎn)生玻璃晶狀體效果，比我預(yù)期的要復(fù)雜得多，因此我認(rèn)為值得分享該過(guò)程，我陷入的陷阱以及我一路上學(xué)到的東西。還有我仍然不明白的事情。

為什麼要表情符號(hào)？

簡(jiǎn)短答案：因?yàn)镾VG需要太多時(shí)間。長(zhǎng)答案：因?yàn)槲胰狈H將它們繪製在圖像編輯器中的藝術(shù)意義，但是我熟悉語(yǔ)法足夠多，因此我通?？梢跃o湊我在網(wǎng)上發(fā)現(xiàn)的現(xiàn)成的SVG，而不到其原始大小的不到10％。因此，我不能僅僅在Internet上找到它們時(shí)使用它們 - 我必須重做代碼以使其超級(jí)乾淨(jìng)和緊湊。這需要時(shí)間。很多時(shí)間，因?yàn)檫@是細(xì)節(jié)的工作。

而且，如果我想要的只是用圖標(biāo)快速代碼菜單概念，我可以使用表情符號(hào)，在它們上應(yīng)用過(guò)濾器以使其與主題匹配，僅此而已！這是我為這個(gè)液體標(biāo)籤欄互動(dòng)演示所做的 - 這些圖標(biāo)都是表情符號(hào)！光滑的山谷效應(yīng)利用了面具合成技術(shù)。

好吧，這將是我們的起點(diǎn)：將表情符號(hào)用於圖標(biāo)。

最初的想法

我的第一個(gè)想法是將導(dǎo)航鏈接的兩個(gè)假（帶有表情符號(hào)的含量）堆疊在一起，略微偏移並用變換旋轉(zhuǎn)底部，以便它們只部分重疊。然後，我將最高的一個(gè)半透明劑，其不透明度值小於1，設(shè)置背景過(guò)濾器：blur（），這應(yīng)該足夠大。

現(xiàn)在，閱讀了介紹後，您可能會(huì)發(fā)現(xiàn)這沒(méi)有按計(jì)劃進(jìn)行，但是讓我們看看代碼中的外觀以及它的問(wèn)題。

我們使用以下哈巴狗生成導(dǎo)航欄：

 - 讓數(shù)據(jù)= {
 - 主：{ico：'？'，色調(diào)：200}， 
 - 注意：{iCo：'？？?'，色調(diào)：260}，， 
 - 活動(dòng)：{ico：'？'，色調(diào)：320}， 
 - 發(fā)現(xiàn)：{ico：'？'，色調(diào)：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

導(dǎo)航
   -  for（讓i = 0; i> n; i）
    a（href ='＃'data-ico = e [i] [1] .ico style =`-hue：$ {e [i] [i] [1] .hue} deg`）＃{e [e [i] [0] [0]}

哪個(gè)彙編到下面的HTML：

 
  <a href="'%EF%BC%83'data-ico"> HOME </a>
  態(tài)
  <a href="'%EF%BC%83'data-ico">活動(dòng)</a>
  <a href="'%EF%BC%83'data-ico" style="'" hue> covery </a>

我們從佈局開(kāi)始，製作元素網(wǎng)格項(xiàng)目。我們將NAV放置在中間，給出鏈接明確的寬度，將兩個(gè)pseudos放在頂部單元格中的每個(gè)鏈接（將鏈接文本內(nèi)容推向底部單元格），然後中間對(duì)準(zhǔn)鏈接文本和偽造。

車(chē)身，nav，a {顯示：網(wǎng)格; }

身體 {
  保證金：0;
  身高：100VH；
}

nav {
  網(wǎng)格 - 自動(dòng)流：列；
  位置：中心；
  填充：.75EM 0 .375EM;
}

a {
  寬度：5em;
  文字平衡：中心；
  
  ＆::之前，＆:: efter {
    網(wǎng)格區(qū)域：1/1；
    內(nèi)容：attr（data-iCo）;
  }
}

請(qǐng)注意，表情符號(hào)的外觀將有所不同，具體取決於您使用的瀏覽器查看演示。

我們選擇一個(gè)清晰的字體，凸起其大小，使圖標(biāo)更大，設(shè)置背景，並為每個(gè)鏈接提供更好的顏色（基於每個(gè)鏈接的-hue自定義屬性）：

身體 {
  / *與以前相同 */
  背景：＃333;
}

nav {
  / *與以前相同 */
  背景：#fff;
  字體：夾具（.625EM，5VW，1.25EM）/ 1.25 Ubuntu，sans-serif;
}

a {
  / *與以前相同 */
  顏色：HSL（var（-hue），100％，50％）;
  文本介紹：無(wú)；
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    字體大?。?.5em;
  }
}

這是事情開(kāi)始變得有趣的地方，因?yàn)槲覀冮_(kāi)始區(qū)分使用鏈接偽造創(chuàng)建的兩個(gè)表情符號(hào)層。我們稍微移動(dòng)並旋轉(zhuǎn)pseudo之前，用棕褐色（1）過(guò)濾器使其單色，使其正確地調(diào)出，然後撞到其對(duì)比度（） - 一種來(lái)自Lea Verou的Oldie，但Goldie Technique。我們還在:: pseudo之後應(yīng)用灰度（1）並使其使其半透明，因?yàn)榉駝t，我們將無(wú)法通過(guò)它看到另一個(gè)偽。

 a {
  / *與以前相同 */
  
  ＆：：前 {
    轉(zhuǎn)換： 
      翻譯（.375EM，-.25EM） 
      旋轉(zhuǎn)（22.5攝氏度）;
    篩選： 
      棕褐色（1） 
      色 - 旋轉(zhuǎn)（calc（var（ -  hue）-50DEG））））） 
      飽和（3）;
  }
	
  ＆：：後 {
    不透明：.5;
    過(guò)濾器：灰度（1）;
  }
}

撞牆

到目前為止，太好了……那呢？下一步，我愚蠢地認(rèn)為，當(dāng)我有了編寫(xiě)編碼的想法時(shí)，這將是最後一步，涉及在頂部（:: :: after）層設(shè)置BlackDrop-Filter：Blur（5px）。

請(qǐng)注意，F(xiàn)irefox仍然需要gfx.webrender.all and layout.css.backdrop-filter.enabled標(biāo)誌設(shè)置為true的標(biāo)誌：in of：config，為了使背景濾波器屬性可行。

可悲的是，結(jié)果看起來(lái)與我期望的不像。我們得到了整個(gè)頂部圖標(biāo)邊界框的大小的覆蓋，但是底部圖標(biāo)並沒(méi)有真正模糊。

但是，我敢肯定，我之前已經(jīng)玩過(guò)背景過(guò)濾器：Blur（），而且效果很好，那麼這裡發(fā)生了什麼？

達(dá)到問(wèn)題的根源

好吧，當(dāng)您不知道為什麼某件事不起作用時(shí)，您所能做的就是舉一個(gè)工作示例，開(kāi)始調(diào)整它以嘗試獲得想要的結(jié)果……看看它破裂了！

因此，讓我們看看我較舊的工作演示的簡(jiǎn)化版本。 HTML只是一節(jié)中的一篇文章。在CSS中，我們首先設(shè)置一些維度，然後在該部分上設(shè)置一個(gè)圖像背景，並在文章中設(shè)置一個(gè)半透明的背景。最後，我們?cè)谖恼轮性O(shè)置了背景濾波器屬性。

 {背景：url（cake.jpg）50％/封面； }

文章 {
  利潤(rùn)：25Vmin;
  身高：40VH；
  背景：HSLA（0，0％，97％，.25）;
  背景過(guò)濾器：模糊（5px）;
}

這起作用，但我們不希望我們的兩個(gè)層彼此嵌套。我們希望他們成為兄弟姐妹。因此，讓我們做兩個(gè)層文章兄弟姐妹，使它們部分重疊，看看我們的玻璃塑態(tài)效應(yīng)是否仍然有效。

 <artical class="'Base'"> 
<artical class="'Gray'"> </artical></artical>

文章{寬度：66％;身高：40VH； }

.base {背景：url（cake.jpg）50％/封面； }

。灰色的 {
  保證金：-50％0 0 33％；
  背景：HSLA（0，0％，97％，.25）;
  背景過(guò)濾器：模糊（5px）;
}

在鍍鉻中，一切似乎都很好，並且在大多數(shù)情況下也是Firefox。只是blur（）在Firefox中的邊緣處理的方式看起來(lái)很尷尬，而不是我們想要的。而且，根據(jù)規(guī)格中的少數(shù)圖像，我相信Firefox的結(jié)果也不正確？

我想在我們的兩個(gè)層坐在堅(jiān)固的背景上（在這種特殊情況下為白色）的情況下，F(xiàn)irefox問(wèn)題的一個(gè)解決方法是為底層（.basase）一個(gè)沒(méi)有偏移，沒(méi)有偏移的盒子陰影，沒(méi)有模糊，而塗抹半徑是兩倍的模糊半徑，我們用於在頂層上使用背景濾波器（.grey）。果然，在我們的特殊情況下，此修復(fù)程序似乎可以起作用。

如果我們的兩個(gè)層坐在帶有未固定的圖像背景的元素上（在這種情況下，我們可以使用分層的背景方法來(lái)解決Firefox問(wèn)題），那麼事情會(huì)變得更加毛髮?zhuān)@裡不是這樣，因此我們不會(huì)進(jìn)入它。

不過(guò)，讓我們繼續(xù)下一步。我們不希望我們的兩個(gè)層是兩個(gè)平方盒，然後我們希望成為表情符號(hào)，這意味著我們不能使用HSLA（）背景來(lái)確保頂部的半平等 - 我們需要使用不透明度。

 ?；疑?{
  / *與以前相同 */
  不透明：.25;
  背景：HSL（0，0％，97％）;
}

看來(lái)我們發(fā)現(xiàn)了問(wèn)題！由於某種原因，使用不透明度製作頂層半透明會(huì)破壞Chrome和Firefox的背景濾波器效應(yīng)。那是一個(gè)錯(cuò)誤嗎？那應(yīng)該發(fā)生什麼嗎？

錯(cuò)誤與否？

MDN在Backdrop-Filter頁(yè)面上的第一段中說(shuō)以下內(nèi)容：

因?yàn)樗m用於元素背後的所有內(nèi)容，以查看必須使元素或其背景至少部分透明的效果。

除非我不了解上述句子，否則這似乎表明不透明度不應(yīng)該打破效果，即使它在鉻和Firefox中都可以。

規(guī)格呢？好吧，規(guī)格是一堵大文字牆，沒(méi)有許多插圖或互動(dòng)演示，用一種語(yǔ)言編寫(xiě)，使閱讀它與嗅探臭鼬的氣味一樣吸引人。它包含了這部分，我有一種感覺(jué)可能是相關(guān)的，但是我不確定我要說(shuō)的是要說(shuō)的是 - 在頂部元素上設(shè)置的不透明度，我們也將背景過(guò)濾器也用於下面的兄弟姐妹嗎？如果這是預(yù)期的結(jié)果，那麼在實(shí)踐中肯定不會(huì)發(fā)生。

除非元素B的某些部分是半透明的，否則將看不到背景過(guò)濾器的效果。另請(qǐng)注意，應(yīng)用於元素B的任何不透明度也將應(yīng)用於過(guò)濾的背景圖像。

嘗試隨機(jī)的事情

無(wú)論規(guī)格可能說(shuō)什麼，事實(shí)仍然存在：使頂層半透明具有不透明度的特性會(huì)破壞鍍鉻和Firefox中的玻璃晶狀體效應(yīng)。還有其他方法可以使表情符號(hào)半透明嗎？好吧，我們可以嘗試過(guò)濾器：opacity（）！

在這一點(diǎn)上，我可能應(yīng)該報(bào)告這種替代方案是否有效，但現(xiàn)實(shí)是……我不知道！我在此步驟上花了幾天的時(shí)間，並在此步驟中進(jìn)行了無(wú)數(shù)次的檢查 - 有時(shí)它有效，有時(shí)它在完全相同的瀏覽器中，根據(jù)一天中的時(shí)間的不同結(jié)果。我還在Twitter上問(wèn)，得到了不同的答案。當(dāng)您不禁要問(wèn)萬(wàn)聖節(jié)鬼是否沒(méi)有困擾，嚇到和疤痕您的代碼時(shí)，只是其中之一。永恆！

看來(lái)所有希望都消失了，但是讓我們只嘗試一件事：用文本代替矩形，最高的是顏色的半透明：hsla（）。我們可能無(wú)法獲得我們所追求的涼爽表情符號(hào)效果，但也許我們可以得到純文本的結(jié)果。

因此，我們將文本內(nèi)容添加到我們的文章元素中，放棄其明確的尺寸，凸起其字體大小，調(diào)整空間，從而使我們局部重疊，最重要的是，用顏色替換上一個(gè)工作版本中的背景聲明。出於可訪問(wèn)性原因，我們還將aria-hidden ='true'設(shè)置在底部。

 <artical class="'Base'Aria-Hidded">獅子？
<artical class="'Gray'">獅子？</artical></artical>

文章{字體：900 21VW/ 1草書(shū)； }

.base {顏色：＃ff7a18; }

?；疑?{
  保證金：-.75EM 0 0 .5EM;
  顏色：HSLA（0，0％，50％，.25）;
  背景過(guò)濾器：模糊（5px）;
}

這裡有幾件事要注意。

首先，將顏色屬性設(shè)置為具有亞軍alpha的值，還可以使表情符號(hào)半透明，而不僅僅是純文本，無(wú)論是在Chrome還是在Firefox中！考慮到其他渠道不會(huì)以任何方式影響表情符號(hào)，這是我以前從未知道的事情，我發(fā)現(xiàn)絕對(duì)令人震驚。

其次，Chrome和Firefox都模糊了橙色文本和表情符號(hào)的整個(gè)區(qū)域，這些區(qū)域在頂部半透明灰色層的邊界框下方發(fā)現(xiàn)，而不僅僅是模糊實(shí)際文本下面的內(nèi)容。在Firefox中，由於尷尬的鋒利邊緣效果，情況看起來(lái)更糟。

即使盒子的模糊不是我們想要的，我也不禁認(rèn)為這確實(shí)有意義，因?yàn)橐?guī)格確實(shí)說(shuō)了以下內(nèi)容：

[…]創(chuàng)建一個(gè)“透明”元素，可以看到完整的過(guò)濾背景圖像，您可以使用“背景色：透明;”。

因此，讓我們進(jìn)行測(cè)試以檢查當(dāng)頂層是另一個(gè)不是文本的非矩形形狀時(shí)發(fā)生的情況，而是用背景梯度，剪貼式路徑或口罩獲得的！

在Chrome和Firefox中，當(dāng)以背景獲得形狀時(shí)，頂層整個(gè)盒子下方的區(qū)域都會(huì)模糊：漸變（），如以前的文本情況所述，根據(jù)規(guī)格有意義。但是，Chrome尊重夾子路徑和麵罩形狀，而Firefox則不尊重。而且，在這種情況下，我真的不知道哪個(gè)是正確的，儘管鉻的結(jié)果對(duì)我來(lái)說(shuō)確實(shí)更有意義。

朝鍍鉻溶液移動(dòng)

當(dāng)我問(wèn)如何使模糊文本邊緣而不是其邊界盒的模糊時(shí)，我得到了這個(gè)結(jié)果，也是我得到的Twitter建議。該解決方案在Firefox中不起作用的原因有兩個(gè)：一個(gè)原因，可悲的是，僅在Webkit瀏覽器中起作用的非標(biāo)準(zhǔn)蒙版-CLIP值，而在上面的測(cè)試中，掩模並不將模糊區(qū)域限制在Firefox中蒙版所產(chǎn)生的形狀。

 / *與以前相同 */

?；疑?{
  / *與以前相同 */
  -webkit面具：線性級(jí)別（紅色，紅色）文本； / *僅在Webkit瀏覽器中工作 */
}

好吧，這實(shí)際上看起來(lái)像我們想要的，所以我們可以說(shuō)我們正朝著正確的方向前進(jìn)！但是，在這裡，我們使用了橙色的心臟表情符號(hào)作為底層，而黑心表情符號(hào)則用於頂部半透明層。其他通用表情符號(hào)沒(méi)有黑白版本，所以我的下一個(gè)想法是最初使這兩層相同，然後將頂部的一個(gè)半透明劑和使用過(guò)濾器製成：灰度（1）。

文章 { 
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25草書(shū)；
}

?；疑?{
  -a：.25;
  保證金：-1EM 0 0 .5EM;
  過(guò)濾器：灰度（1）;
  背景過(guò)濾器：模糊（5px）;
  -webkit面具：線性級(jí)別（紅色，紅色）文本；
}

好吧，那肯定會(huì)產(chǎn)生我們想要的效果。不幸的是，出於某種奇怪的原因，它似乎也影響了下面的層的模糊區(qū)域。這一刻是要簡(jiǎn)要考慮將筆記本電腦扔出窗口的地方……在獲得添加另一層的想法之前。

它會(huì)像這樣：我們有基礎(chǔ)層，就像我們到目前為止，與上面的其他兩個(gè)相距略有偏見(jiàn)。中間層是一個(gè)“幽靈”（透明），它應(yīng)用了背景過(guò)濾器。最後，頂部是半透明的，並獲取灰度（1）濾波器。

身體{顯示：網(wǎng)格; }

文章 {
  網(wǎng)格區(qū)域：1/1；
  位置：中心；
  填充：.25em;
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25 Pacifico，Z003，Segoe腳本，漫畫(huà)Sans MS，草書(shū)；
}

.base {margin：-.5em 0 0 -.5em; }

.midl {
  -a：0;
  背景過(guò)濾器：模糊（5px）;
  -webkit面具：線性級(jí)別（紅色，紅色）文本；
}

.grey {過(guò)濾器：灰度（1）不透明度（.25）}

現(xiàn)在我們到達(dá)某個(gè)地方！還有另一件事要做：使基層單色！

 / *與以前相同 */

。根據(jù) {
  保證金：-.5EM 0 0 -.5EM;
  濾鏡：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對(duì)比度（1.5）;
}

好吧，這就是我們想要的效果！

進(jìn)入Firefox解決方案

在編碼Chrome解決方案時(shí)，我不禁認(rèn)為我們可能能夠在Firefox中取得相同的結(jié)果，因?yàn)镕irefox是唯一支持元素（）函數(shù)的瀏覽器。此功能使我們可以採(cǎi)用一個(gè)元素，並將其用作另一個(gè)元素的背景。

這個(gè)想法是，.base和.grey層具有與Chrome版本相同的樣式，而中間層將具有（通過(guò)元素（）函數(shù)）我們層的模糊版本的背景。

為了使事情變得更容易，我們僅從這個(gè)模糊的版本和中層開(kāi)始。

 獅子？
<artical class="'Midl'">獅子？</artical>

我們絕對(duì)將模糊的版本定位（目前仍將其視為），使其單色並模糊，然後將其用作.midl的背景。

 #blur {
  位置：絕對(duì)；
  頂部：2em;右：0;
  保證金：-.5EM 0 0 -.5EM;
  過(guò)濾器：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對(duì)比度（1.5）Blur（5px）;
}

.midl {
  -a：.5;
  背景：-moz -element（#blur）;
}

我們還將文字在.midl元素半透明式上進(jìn)行了，因此我們可以通過(guò)它看到背景。最終我們將使其完全透明，但是就目前而言，我們?nèi)匀幌Ｍ吹狡湎鄬?duì)於背景的位置。

我們可以立即註意到一個(gè)問(wèn)題：雖然保證金可以抵消實(shí)際的#Blur元素，但它無(wú)濟(jì)於事，可以轉(zhuǎn)移其作為背景的位置。為了獲得這種效果，我們需要使用轉(zhuǎn)換屬性。如果我們想要旋轉(zhuǎn)或任何其他變換，這也可以幫助我們，因?yàn)樗梢栽谙旅婵吹轿覀冇米儞Q替換邊緣的地方：旋轉(zhuǎn)（-9DEG）。

好吧，但是我們?nèi)匀粓?jiān)持現(xiàn)在的翻譯：

 #blur {
  / *與以前相同 */
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）; / *更換保證金 */
}

這裡要注意的一件事是，隨著中間層的填充框的限制，它有些模糊的背景被切斷。無(wú)論如何，這並不重要，因?yàn)槲覀兊南乱徊叫袆?dòng)是將背景夾在文本區(qū)域中，但是只有該空間就可以了，因?yàn)?base層將被翻譯到遠(yuǎn)處。

因此，即使在這一點(diǎn)上，我們也會(huì)在視覺(jué)上毫無(wú)區(qū)別，因?yàn)槲覀冞€設(shè)置了backgrows-clip：.midl元素上的文本，我們也將稍微提高填充物。

文章 {
  / *與以前相同 */
  填充：.5em;
}

#blur {
  位置：絕對(duì)；
  底部：100VH;
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  過(guò)濾器：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對(duì)比度（1.5）Blur（5px）;
}

.midl {
  -a：.1;
  背景：-moz -element（#blur）;
  背景剪輯：文字；
}

我們還將#Blur元素移到了視線之外，並進(jìn)一步降低了.midl元素的顏色的alpha，因?yàn)槲覀兿Ｍㄟ^(guò)文本在背景上更好地視野。我們並沒(méi)有使其完全透明，但是現(xiàn)在仍然可以看到它，以便我們知道它覆蓋的區(qū)域。

下一步是添加帶有與Chrome情況相同的樣式的.basase元素，只能用轉(zhuǎn)換代替邊距。

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'">獅子？</artical></artical>

 #blur {
  位置：絕對(duì)；
  底部：100VH;
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  過(guò)濾器：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對(duì)比度（1.5）Blur（5px）;
}

。根據(jù) {
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋轉(zhuǎn)（165DEG）對(duì)比度（1.5）;
}

由於這些樣式的一部分很常見(jiàn)，因此我們還可以在模糊元素#blur上添加.basase類(lèi)，以避免重複並減少我們編寫(xiě)的代碼量。

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'">獅子？</artical></artical>

 #blur {
  -r：5px;
  位置：絕對(duì)；
  底部：100VH;
}

。根據(jù) {
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋酸鹽（165DEG）對(duì)比度（1.5）Blur（var（-r，0））;
}

我們這裡有一個(gè)不同的問(wèn)題。由於.base層具有轉(zhuǎn)換，因此儘管DOM順序，它現(xiàn)在位於.Midl層的頂部。最簡(jiǎn)單的修復(fù)？在.midl元素上添加z index：2！

我們?nèi)匀挥辛硪粋€(gè)更微妙的問(wèn)題：在.Midl元素上設(shè)置的模糊背景的半透明部分下方仍然可以看到.base元素。我們不想看到下面的.base層文本的尖銳邊緣，但是我們是因?yàn)槟：龝?huì)導(dǎo)致像素接近邊緣變成半透明的像素。

根據(jù)我們?cè)谖谋緦拥母改干砩嫌心姆N背景，這是一個(gè)可以通過(guò)少量或大量精力來(lái)解決的問(wèn)題。

如果我們只有堅(jiān)實(shí)的背景，則通過(guò)將.Midl元素上的背景色設(shè)置為相同的值來(lái)解決問(wèn)題。幸運(yùn)的是，這恰好是我們的情況，因此我們不會(huì)討論其他情況。也許在另一篇文章中。

 .midl {
  / *與以前相同 */
  背景：-moz -element（#blur）#fff;
  背景剪輯：文字；
}

我們?cè)贔irefox中取得了不錯(cuò)的成績(jī)！剩下要做的就是添加頂部.grey層，其樣式與Chrome版本完全相同！

 .grey {過(guò)濾器：灰度（1）不透明度（.25）; }

可悲的是，這樣做並不能產(chǎn)生我們想要的結(jié)果，如果我們還將中間層文本完全透明（通過(guò)將其alpha -a：0）使中間層文本完全透明，那麼我們只會(huì)看到其背景（在固體白色頂部使用模糊的元素#blur）夾在文本區(qū)域：

問(wèn)題是我們看不到.grey層！由於設(shè)置了z索引：2，中間層.MIDL現(xiàn)在還是在頂層（.grey One）上方，儘管有DOM順序。解決方案？設(shè)置z索引：3上的.grey層！

 。灰色的 {
  z索引：3;
  過(guò)濾器：灰度（1）不透明度（.25）;
}

我真的不喜歡一層給出z索引，但是，嘿，這很努力，而且有效！我們現(xiàn)在有一個(gè)不錯(cuò)的Firefox解決方案：

將我們的解決方案組合到跨瀏覽器中

我們從Firefox代碼開(kāi)始，因?yàn)檫€有更多：

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'Aria-Hidded">獅子？
<artical class="'Gray'">獅子？</artical></artical></artical>

身體{顯示：網(wǎng)格; }

文章 {
  網(wǎng)格區(qū)域：1/1；
  位置：中心；
  填充：.5em;
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25草書(shū)；
}

#blur {
  -r：5px;
  位置：絕對(duì)；
  底部：100VH;
}

。根據(jù) {
  變換：轉(zhuǎn)換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋酸鹽（165DEG）對(duì)比度（1.5）Blur（var（-r，0））;
}

.midl {
  -a：0;
  z索引：2;
  背景：-moz -element（#blur）#fff;
  背景剪輯：文字；
}

?；疑?{
  z索引：3;
  過(guò)濾器：灰度（1）不透明度（.25）;
}

額外的z索引聲明不會(huì)影響鉻的結(jié)果，並且視覺(jué)#blur元素也不會(huì)影響。為了在Chrome中起作用的唯一缺少的是背景濾波器和.midl元素上的蒙版聲明：

背景過(guò)濾器：模糊（5px）;
-webkit面具：線性級(jí)別（紅色，紅色）文本；

由於我們不希望在Firefox中應(yīng)用背景過(guò)濾器，也不希望背景在Chrome中應(yīng)用，因此我們使用@supports：

 $ r：5px;

/ *與以前相同 */

#blur {
  / *與以前相同 */
  -r：＃{$ r};
}

.midl {
  -a：0;
  z索引：2;
  / *需要在@supports內(nèi)部重置，以免將其應(yīng)用於Firefox */
  背景過(guò)濾器：Blur（$ r）;
  / * Firefox中無(wú)效的值，無(wú)論如何都沒(méi)有應(yīng)用，無(wú)需重置 */
  -webkit面具：線性級(jí)別（紅色，紅色）文本；
  
  @supports（背景：-moz -element（#blur））{ / * for Firefox * /
    背景：-moz -element（#blur）#fff;
    背景剪輯：文字；
    背景過(guò)濾器：無(wú)；
  }
}

這為我們提供了跨瀏覽器解決方案！

雖然在兩個(gè)瀏覽器中的結(jié)果並不相同，但它仍然非常相似，對(duì)我來(lái)說(shuō)足夠了。

一個(gè)元素的解決方案呢？

可悲的是，這是不可能的。

首先，F(xiàn)irefox解決方案要求我們至少具有兩個(gè)元素，因?yàn)槲覀兪褂靡粋€(gè)元素（由其ID引用）作為另一個(gè)元素。

其次，雖然其餘三層的第一個(gè)想法（無(wú)論如何，這是我們唯一需要的鉻解決方案）是，其中一個(gè)可能是實(shí)際元素，而其他兩個(gè)則可能是偽造的，但在這種特殊情況下，它並不那麼簡(jiǎn)單。

對(duì)於Chrome解決方案，每個(gè)層都有至少一個(gè)特性，它也會(huì)不可逆地影響任何兒童及其可能擁有的任何偽造物。對(duì)於.base和.grey層，這就是過(guò)濾器屬性。對(duì)於中間層，這是掩模屬性。

因此，儘管擁有所有這些元素並不是很漂亮，但如果我們希望玻璃晶狀體效應(yīng)也可以在表情符號(hào)上起作用，看起來(lái)我們沒(méi)有更好的解決方案。

如果我們只想對(duì)純文本產(chǎn)生玻璃晶狀體影響 - 圖片中沒(méi)有表情符號(hào) - 只需兩個(gè)元素即可實(shí)現(xiàn)，其中只需要一個(gè)元素才能用於鍍鉻溶液。另一個(gè)是#blur元素，我們只需要在Firefox中。

 血液
<artical class="'text'aria-hidded"> </artical>

我們使用.TEXT元素的兩個(gè)偽群來(lái)創(chuàng)建基礎(chǔ)層（以::之前）和其他兩個(gè)層的組合（帶有::後面）。在這裡有幫助的是，隨著表情符號(hào)的圖像，我們不需要過(guò)濾器：灰度（1），而是我們可以控制顏色值的飽和成分。

這兩個(gè)偽堆在另一個(gè)偽造的頂部，底部的一個(gè)（::前）被相同的量偏移，並且具有與#Blur元素相同的顏色。該顏色值取決於一個(gè)標(biāo)誌 - -f，有助於我們控制飽和度和alpha。對(duì)於#blur元素和偽元素和:: pseudo（-f：1）之前，飽和度為100％，alpha為1。對(duì)於pseudo（-f：0）之後的:: ::飽和度為0％，而alpha為.25。

 $ r：5px;

％text {// #blur和兩個(gè).text pseudos使用
  -f：1;
  網(wǎng)格區(qū)域：1/1； //堆棧pseudos，絕對(duì)定位的#base忽略了
  填充：.5em;
  顏色：HSLA（345，calc（var（-f）*100％），55％，calc（.25 .75*var（-f）））;
  內(nèi)容：attr（data-text）;
}

文章{字體：900 21VW/ 1.25草書(shū)}

#blur {
  位置：絕對(duì)；
  底部：100VH;
  過(guò)濾器：Blur（$ r）;
}

#blur，.text :: {
  變換：翻譯（ - 。125EM，-.125EM）;
  @extend％text;
}

.文字 {
  顯示：網(wǎng)格；
	
  ＆：：後 {
    -f：0;
    @extend％text;
    z索引：2;
    背景過(guò)濾器：Blur（$ r）;
    -webkit面具：線性級(jí)別（紅色，紅色）文本；

    @supports（背景：-moz -element（#blur））{
      背景：-moz -element（#blur）#fff;
      背景剪輯：文字；
      背景過(guò)濾器：無(wú)；
    }
  }
}

將跨瀏覽器解決方案應(yīng)用於我們的用例

這裡的好消息是我們的特殊用例，在該情況下，我們只對(duì)鏈接圖標(biāo)產(chǎn)生玻璃效果效果（不在整個(gè)鏈接上，包括文本）實(shí)際上簡(jiǎn)化了一點(diǎn)一點(diǎn)。

我們使用以下哈巴狗生成結(jié)構(gòu)：

 - 讓數(shù)據(jù)= {
 - 主：{ico：'？'，色調(diào)：200}， 
 - 注意：{iCo：'？？?'，色調(diào)：260}，， 
 - 活動(dòng)：{ico：'？'，色調(diào)：320}， 
 - 發(fā)現(xiàn)：{ico：'？'，色調(diào)：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

導(dǎo)航
   -  for（讓i = 0; i <n i e .ico a.item .hue deg span.icon.tint span.icon.midl span.icon.grey><p>它產(chǎn)生了下面的HTML結(jié)構(gòu)：</p>
<pre rel="HTML" data-line=""> 
  <a class="'item'href" hue>
    <span class="'圖標(biāo)tint'id">？</span>
    <span class="'圖標(biāo)色調(diào)'aria-hidded">？</span>
    <span class="'iCon" midl>？</span>
    <span class="'圖標(biāo)灰色'aria-hidded">？</span>
    家
  </a>
  

我們可能可以用偽造代替這些跨度的一部分，但是我覺(jué)得它更加一致，更容易，所以跨度三明治！

值得注意的一件事是，我們對(duì)每個(gè)項(xiàng)目都有一個(gè)不同的模糊圖標(biāo)層（因?yàn)槊總€(gè)項(xiàng)目都有自己的圖標(biāo)），因此我們將.Midl元素的背景設(shè)置為樣式屬性。如果我們添加或刪除數(shù)據(jù)對(duì)象的條目（從而更改菜單項(xiàng)的數(shù)量），以這種方式進(jìn)行操作可以避免對(duì)CSS文件進(jìn)行任何更改。

當(dāng)我們第一次CSS-ED The Nav Bar時(shí)，我們幾乎具有相同的佈局和風(fēng)化的樣式。唯一的區(qū)別是，現(xiàn)在我們?cè)陧?xiàng)目網(wǎng)格的頂部單元格中沒(méi)有偽造。我們有跨度：

跨度{
  網(wǎng)格區(qū)域：1/1； / *將所有表情符號(hào)彼此堆疊在一起 */
  字體大?。?em; / *凸起表情符號(hào)大小 */
}

對(duì)於表情符號(hào)圖標(biāo)本身，我們也不需要從跨瀏覽器版本中進(jìn)行許多更改，儘管有一些lttle。

首先，我們使用最初選擇的轉(zhuǎn)換和濾網(wǎng)鏈，而不是使用鏈接偽造而不是跨度。從那以後，我們也不需要顏色：hsla（）聲明，因?yàn)槲覀冎挥斜砬榉?hào)在這裡，所以只有alpha頻道才是重要的。為.base和.grey層保留的默認(rèn)值是1。因此，我們不在設(shè)置一個(gè)顏色值，而只有alpha，-a，通道很重要，我們將其更改為.midl層上的0，我們將其直接設(shè)置為顏色：透明。我們也只需要在Firefox情況下的.midl元素上設(shè)置背景色，因?yàn)槲覀円呀?jīng)在樣式屬性中設(shè)置了背景圖像。這導(dǎo)致了解決方案的以下適應(yīng)：

 .base { / * mono emoji版本 * /
  變換：translate（.375em，-.25em）旋轉(zhuǎn)（22.5DEG）;
  濾鏡：棕褐色（1）色調(diào)旋轉(zhuǎn)（var（-hue））飽和（3）Blur（var（-r，0））;
}

.midl { / *中間，透明表情符號(hào)版本 * /
  顏色：透明； / *所以看不到 */
  背景過(guò)濾器：模糊（5px）;
  -webkit mask：線性級(jí)別（紅色0 0）文本;
  
  @supports（背景：-moz -element（#b））{
    背景色：#FFF;
    背景剪輯：文字；
    背景過(guò)濾器：無(wú)；
  }
}

就是這樣 - 我們對(duì)此NAV欄具有不錯(cuò)的圖標(biāo)玻璃效果！

只有一件事要照顧 - 我們一直不希望這種效果；僅在：懸?；颍航裹c(diǎn)狀態(tài)。因此，我們將使用一個(gè)標(biāo)誌，即正常狀態(tài)為0，在：懸?；颍航裹c(diǎn)狀態(tài)中為1，以控制不透明度並轉(zhuǎn)換.base跨度的不透明度。這是我在早期文章中詳細(xì)介紹的一種技術(shù)。

 $ t：.3s;

a {
  / *與以前相同 */
  -hl：0;
  顏色：HSL（var（-hue），calc（var（-hl）*100％），65％）;
  過(guò)渡：顏色$ t;
  
  ＆：Hover，＆：focus {-hl：1; }
}

。根據(jù) {
  轉(zhuǎn)換： 
    翻譯（calc（var（-hl）*。375EM），calc（var（-hl）* - 。25EM）） 
    旋轉(zhuǎn)（calc（var（-hl）*22.5DEG））;
  不透明度：var（-hl）;
  過(guò)渡：變換$ t，不透明度$ t;
}

當(dāng)圖標(biāo)懸?；蚓劢箷r(shí)，可以在下面的交互式演示中看到該結(jié)果。

使用SVG圖標(biāo)怎麼樣？

在完成CSS表情符號(hào)版本所需的一切之後，我自然而然地問(wèn)自己這個(gè)問(wèn)題。普通的SVG方式是否比跨度三明治更有意義，這不是很簡(jiǎn)單嗎？好吧，雖然這確實(shí)更有意義，尤其是因?yàn)槲覀儧](méi)有表情符號(hào)，但可悲的是代碼不少，而且也不是更簡(jiǎn)單。

但是，我們將在另一篇文章中詳細(xì)介紹！

以上是CSS中的圖標(biāo)玻璃塑料效應(yīng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！