實現div毛玻璃背景

原文在我的部落格☞實現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。

**如下：

lang="en">

charset="utf-8">
毛玻璃效果title>
head>
*.bg
.blur_box
.blur_box
:before
.rgba
.content_text
article
style>
class="bg">
class="blur_box">
class="rgba">
div>
class="content_text">
texttexttexttexttexttexttexttexttextp>
texttexttexttexttexttexttexttexttextp>
texttexttexttexttexttexttexttexttextp>
texttexttexttexttexttexttexttexttextp>
texttexttexttexttexttexttexttexttextp>
texttexttexttexttexttexttexttexttextp>
div>
article>
div>
body>
html>注釋已經寫的很詳細了，但有一點還是得單獨說一下。因為blur()產生的模糊效果當值越大時，就會有越寬的邊緣漸變過渡，為了消除(實際上只是讓它看不見)，我將模糊層的寬度和高度都變大，再通過top
和left負值調整位置。
.blur_box
:before

實現div毛玻璃背景

ios裡毛玻璃效果的使用非常多，本文介紹乙個實現div毛玻璃背景的方法 css3的filter主要用在影象的特效處理上，預設值為none，還有以下備選項 1.grayscale灰度 2.sepia褐色 3.saturate飽和度 4.hue rotate色相旋轉 5.invert反色 6.opaci...

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

由於一些原因，在乙個wpf的應用裡想做個有毛玻璃效果的panel，放些按鈕在上面，然後疊加在乙個listbox 內容為 上。感覺會還不錯。在網上找了一段時間，感覺都比較複雜，還得寫c 覺得應該只寫xaml就夠了啊，又找不到資源，乾脆自己寫算了。參考了一些資料，覺得關鍵在於這個panel的背景需要參考...

讓背景出現毛玻璃的效果

1.背景是半透明的 2.背景有毛玻璃的模糊效果 3.上面的字型清晰可見 效果如下 先是背景透明，字型清晰可見 div 再來個模糊處理 div 還做了相容處理，美滋滋。開啟瀏覽器重新整理 我擦，這都是什麼鬼。不行，要分析一下。原來div裡面的字和div是在乙個盒子裡面，設定這個盒子為模糊，那麼裡面的字...