附上要實現的效果圖，如果我截圖截的不明顯的話，我可以解說下：

中間是獲取到一本書的封面，然後背景按獲取到的封面平鋪，並且模糊，上面還有一層透明度0.65的蒙層

聽著是不是很簡單，實現起來還是有很多問題的。

html結構代碼：

一般人的實現辦法是一個div存放內容（指針、轉盤、書名、audio操作區等），然後寬度100%，高度100%，然後另外給個div存放背景，當然不想多寫div的話，可以用偽類實現，我用的是::before,css樣式如下：背景模糊------filter:blur(模糊數值)

問題1：頁面上的內容也會被模糊，導航欄和圖書章節名字都看不見了。

那怎麽解決問題1呢，很明顯是層級問題，解決方法，將父元素的層級設置為1，將偽類的層級設置為-2（註意偽類的層級一定要小於0，這樣才能放到背景後面）

加了層級之後頁面是這樣的，導航欄和圖書章節名字都顯示出來了。

不過上述代碼太亮了還是和我們預期的psd不太一樣，再加一個蒙層就可以了，這邊我用偽類::after寫的

然後看一下整體效果

嗯，上圖的效果看著是不是很完美了，看著是很完美了，但是，萬惡的華為手機自帶瀏覽器，背景根本沒有模糊效果，當時我的內心是奔潰的，因為所有的華為自帶都沒有模糊效果，而且我該加的兼容前綴都已經加了，怎麽會沒有效果呢，還好，還好有stackblur.js，為了不白費我之前寫的css代碼，我單獨給華為自帶的瀏覽器是用stackBlurImage()這個方法實現的，下面我來粗粗的給大家介紹下這個方法，我也是通過強大的百度學習來的。

1首先前端想要使用stackblur.js，要使用stckblur.js的類庫，這邊附上下載地址：http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js

2API說明

這個庫提供了3個函數：

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); //用於將圖片模糊繪制到canvas

stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius ); //用於對Canvas矩形區域執行RGBA模糊

stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius ); //用於對Canvas矩形區域執行RGB模糊，不考慮Alpha值

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel )
sourceImageID表示要模糊的圖片的id；
targetCanvasID表示要顯示模糊圖片的canvas元素的id;
radius表示模糊的半徑大小。不過，根據我的對比測試，radius好像與CSS中filter濾鏡的模糊值不是1:1匹配的，反倒是有些類似2:1. 也就是這裏的20px的半徑模糊近似於CSS中blur濾鏡值設置為10px;
blurAlphaChannel為布爾屬性，表示aplha透明通道是否要模糊，true表示要模糊。

3我這邊調用的是stackBlurImage

結構：

，圖片封面存放結構

實現的js代碼

然後，刷新下華為自帶瀏覽器，OK了，可以變模糊了。

以上就是實現的一個css實現背景模糊效果和StackBlur.js實現模糊效果的例子，其實我用了StackBlur.js之後，可以不用css那寫代碼，直接用StackBlur實現模糊就好了，也不用那麽麻煩寫兩套了，但是不寫寫你怎麽知道呢，多實踐多積累才是咱們的秘密武器不是嘛。還有，有不足的地方歡迎指出謝謝。

css3----毛玻璃效果