CSS backdrop-filter 原生背景毛玻璃

2020/08/26 704 1 網站技術 , 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

留言區 / Comments

萌芽論壇