CSS backdrop-filter 原生背景毛玻璃

2020/08/26 144 網站技術 , CSS

以前在網頁上做背景毛玻璃非常麻煩,要特別在需要毛玻璃背景的元素上加偽元素 ::before,然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);,數值可調整,這樣就搞定啦!但現在隨著 CSS 的進步,可以直接在需要毛玻璃背景的元素上加 backdrop-filter 屬性,就能做出同樣的效果,省事非常多!但因為這個新屬性並不屬於任何正式的規範,因此瀏覽器支援的狀況還很差,像是知名的火狐瀏覽器(Firefox)就尚未支援這個效果。

效果如上,很輕鬆就能搭配半透明的框來實作,來看 HTML 原始碼的部分:

<div class="container">
  萌芽網頁
</div>

基本上就好幾個容器,這沒什麼好說。再來才是重點,CSS:

.container {
  width: 150px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  color: #FFF;
  background: rgba(131, 72, 0, 0.5);
  backdrop-filter: blur(10px); /* 毛玻璃 */
  border-radius: 5px;
}

當然如果您網頁沒有設置 body 的背景就沒有效果囉!一般來說 5px~10px 的數值效果就挺好了!容器搭配透明度 50%~95% 顏色背景效果很酷!

附上 CodePen 輕鬆上手:

See the Pen
backdrop-filter 原生背景毛玻璃 - CSS - 萌芽の網頁設計實驗室
by Feng, Cheng-Chi (@qwe987299)
on CodePen.

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB