實現div毛玻璃背景

2021-08-10 02:36:32 字數 2031 閱讀 4368

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

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

實現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是在乙個盒子裡面,設定這個盒子為模糊,那麼裡面的字...