筆者在開(kāi)發(fā)英語(yǔ)角中添加了比較多的毛玻璃效果，以及后續(xù)在開(kāi)發(fā)晨讀小程序、新年“奇思妙想”活動(dòng)中遇到了這種效果，UI 也說(shuō)后續(xù)可能會(huì)比較大量的使用這個(gè)效果，所以這里記錄一下毛玻璃效果的實(shí)現(xiàn)以及踩坑記錄

使用中的各個(gè)場(chǎng)景：

4種實(shí)現(xiàn)方式特點(diǎn)以及兼容性對(duì)比

實(shí)現(xiàn)的css名稱(chēng)	特點(diǎn)	兼容性
filter	讓本層元素以及子元素模糊
backdrop-filter	讓本層元素之下的背景模糊
svg	只作用到引用了svg濾鏡效果的元素
canvas	可以局部模糊元素

兼容性對(duì)比：cavas api 、css filter、svg filter兼容性都差不多，backdrop-filter兼容性差點(diǎn)

css濾鏡

屬性值	濾鏡效果	使用值	實(shí)際效果
	普通圖片
blur	高斯模糊	filter:  blur(5px);
brightness	亮度	filter: brightness(0.4);
contrast	對(duì)比度	filter:  contrast(200%);
drop-shadow	陰影	filter: drop-shadow(16px 16px 20px blue);
grayscale	灰度	filter: grayscale(50%);
hue-rotate	色相	filter: hue-rotate(90deg);
invert	反相	filter: invert(75%);
opacity	透明度	filter: opacity(25%);
saturate	飽和度	filter: saturate(30%);
sepia	褐色	filter: sepia(60%);

filter

屬性介紹：

css濾鏡，作用于本層元素以及子元素

具體實(shí)現(xiàn)方式：

以英語(yǔ)角活動(dòng)主題頁(yè)面為例：

效果如下：

ui解說(shuō)：

該效果一共有4層，第一層是頭圖，第二層是藍(lán)色底色，第三層是一個(gè)模糊的圖片，第四層是文字面板

前端效果實(shí)現(xiàn)：

• 頭圖：

然后繪制一個(gè)面板，上移。

面板一共有3層：

• 第一層：背景為純藍(lán)色

• 第二層：毛玻璃圖片：可用:after設(shè)置該層，效果用fiter屬性實(shí)現(xiàn)，讓圖片模糊，再變暗。

• 第三層：字（不能將字放在第二層，不然字也會(huì)模糊）

代碼參考：

.panel{
  color: rgb(255,255,255);
  margin-top:-162px;
  background-color: rgb(32,0,77);   // 第一層純色背景
  overflow: hidden;  // 將第二層超出的圖片截?cái)?br>  position: absolute;
  border-radius: 20px;
  
  &::before  {    // 第二層
    content:'';
    background: url('./assets/headerBg.png') no-repeat center center;
    background-size: 375px 442px;
    -webkit-filter: blur(50px) brightness(60%);// 設(shè)置圖片模糊并且變暗
    -moz-filter: blur(50px) brightness(60%);
    filter: blur(50px) brightness(60%);
    position: absolute;
    top:0;
    top:-280px;    // 圖片上移，得到想要的背景圖片
    width: 375px;
    height: 442px;
  }
  
  .content{   //第三層
    position: relative; // 這一層一定要加一個(gè) position:relative 的值
    z-index:2; // 同時(shí)需要加一個(gè) z-index:2，不然::before的內(nèi)容會(huì)蓋在上面
  }
}

坑點(diǎn)：

1、在ios中出現(xiàn)lottie卡頓現(xiàn)象

上為以前ios的lottie動(dòng)效，下為現(xiàn)在ios的lottie動(dòng)效

解決辦法：

• 添加-webkit-transform: translateZ(0px);屬性啟動(dòng)硬件加速，無(wú)效

2、在iphone x和ipad中出現(xiàn)上下滾動(dòng)白屏的現(xiàn)象

下面的視頻是在ipad中錄制的

解決辦法：

• 設(shè)置html和body的背景色為藍(lán)色，無(wú)效
• 網(wǎng)上說(shuō)添加最外層div添加-webkit-overflow-scrolling: touch;屬性可以解決ios滾動(dòng)不流暢問(wèn)題，然而無(wú)效。

3、出現(xiàn)奇怪的別的顏色

測(cè)試時(shí)發(fā)現(xiàn)在iphone x機(jī)型上會(huì)必現(xiàn)（左為iphone x，右為正常機(jī)型）

backdrop-filter

實(shí)現(xiàn)方式

超級(jí)簡(jiǎn)單，只需要在需要實(shí)現(xiàn)高斯模糊的背景上面的面板上面加上這些參數(shù)就好。

background-color: rgba(32,0,77,0.5);
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);

只需要在需要模糊的背景之上加上一層半透明的帶模糊效果的蒙層即可

坑點(diǎn)：

1、兼容性比較差

解決辦法：

• 如果ui接受這個(gè)半透明效果也可以
• 如果ui不接受，和ui商量如果不兼容時(shí)是否可以讓背景是一個(gè)純色
• 通過(guò)@support判斷瀏覽器或者移動(dòng)端頁(yè)面是否支持這個(gè)css屬性

/* 默認(rèn)情況下的樣式，如：不支持 backdrop-filter 甚至不支持 @supports 的情況下 應(yīng)用此效果 */
.element {
  background-color: #fff;
}
@supports (-webkit-backdrop-filter: brightness(150%) blur(30px)) or (backdrop-filter: brightness(150%) blur(30px)){
  /* 支持 backdrop-filter 時(shí)應(yīng)用的效果，記得把一些屬性覆蓋掉 */
  .element {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: brightness(150%) blur(30px);
  backdrop-filter: brightness(150%) blur(30px);
  }
}

2、可能出現(xiàn)白邊效果

解決辦法：添加overflow: hidden

svg

1. svg提供filter容器做濾鏡效果，它不能直接呈現(xiàn)，可以利用目標(biāo)SVG元素上的filter屬性引用一個(gè)濾鏡，意思是不能直接出效果，必須引用到目標(biāo)元素，比如才可以

實(shí)現(xiàn)方式：

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="wh100">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<image filter="url(#blur)" x="0" y="0" width="100%" height="100%" xlink:href="http://p-boe.byted.org/img/ez-data/1611817571717f65d858271~375x0.png" alt="">
</svg>

canvas

Canvas中的有個(gè)getImageData方法，可以獲取每個(gè)圖片像素點(diǎn)的信息，我們就可以根據(jù)特定的算法，對(duì)這些信息點(diǎn)進(jìn)行轉(zhuǎn)化，就能使用各種圖片特效。例如，置灰效果，例如反差效果，或者是一些復(fù)雜的圖像混合效果。

實(shí)現(xiàn)方式：

可以使用stackblur-canvas這個(gè)包，地址如下：

npm包：https://www.npmjs.com/package/stackblur-canvas^[1]

它的參數(shù)官網(wǎng)介紹如下：

值得注意的是，它和filter以及svg不太一樣，它可以設(shè)置模糊的元素的區(qū)域

總結(jié)

css中的backdrop-filter是往往最能夠滿(mǎn)足ui的需求，比如需要背景中的局部模糊，又得模糊的地方加一下陰影或者圓角，那其他3種實(shí)現(xiàn)方式幾乎就pass掉了。

而且實(shí)現(xiàn)非常簡(jiǎn)單，有一些坑，但是都可以解決。只是兼容性不如其他3種實(shí)現(xiàn)方式，在測(cè)試中發(fā)現(xiàn)有過(guò)一部oppo手機(jī)和一部小米手機(jī)不支持這個(gè)樣式。

這個(gè)可以和ui協(xié)商一下，是否有兜底邏輯或者可以接受半透明效果。如果實(shí)在不能接受，并且只是簡(jiǎn)單的模糊效果，又需要只模糊部分圖片，那就可以用cavas做。

如果只是簡(jiǎn)單的模糊整張圖片，則可以考慮用css filter或者svg效果。

參考文檔

模糊效果的4種實(shí)現(xiàn)方案^[2]

css技巧^[3]

小tip: 使用CSS將圖片轉(zhuǎn)換成模糊(毛玻璃)效果^[4]

參考資料