實現div毛玻璃背景

ios裡毛玻璃效果的使用非常多，本文介紹乙個實現div毛玻璃背景的方法

css3的filter主要用在影象的特效處理上，預設值為none，還有以下備選項：

1.grayscale灰度

2.sepia褐色

3.saturate飽和度

4.hue-rotate色相旋轉

5.invert反色

6.opacity透明度

7.brightness亮度

8.contrast對比度

9.blur模糊

10.drop-shadow陰影

每一種效果大家可以自己試試，考慮一下可以用在哪些方面，

這裡僅僅用到了其中的blur，幫助實現高斯模糊的效果。

相容性我試了一下最新的火狐和chrome效果都是可以的，ie不用說了…

引數預設是0，單位px，不接受%，引數值的大小表示螢幕上以多少畫素融在一起，所以值越大越模糊。

:before是css中的一種偽元素，可用於在某個元素之前插入某些內容。

用它來新增模糊背景，具體用法可以看我另外一篇?:before和:after

毛玻璃背景上文字內容顯示效果並不理想，無論字型顏色深或淺，看著總是怪怪的…因此還需要加上一層帶色的半透明背景，一般是黑色，或白色。

整體通過三層重疊實現，

最下面是模糊層.blur_box:before，設定z-index: -2。

中間是rgba層.rgba，設定z-index: -1。

最上面是內容層.blur_box，設定z-index: 0。

**如下：

texttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttext texttexttexttexttexttexttexttexttext

注釋已經寫的很詳細了，但有一點還是得單獨說一下。因為blur()產生的模糊效果當值越大時，就會有越寬的邊緣漸變過渡，為了消除(實際上只是讓它看不見)，我將模糊層的寬度和高度都變大，再通過top和left負值調整位置。

.blur_box:before

其中.rgba也可改為白色半透明background-color: rgba(255,255,255,0.2);，完全取決於自己，然後相應改變內容的字色。blur()的引數也可以根據自己愛好試著改變出想要的效果。

實現div毛玻璃背景/

實現div毛玻璃背景

實現div毛玻璃背景

純粹使用xaml實現毛玻璃背景Panel效果

讓背景出現毛玻璃的效果

實現div毛玻璃背景

實現div毛玻璃背景

純粹使用xaml實現毛玻璃背景Panel效果

讓背景出現毛玻璃的效果

相關推薦