css毛玻璃效果

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 332 阅读时长 ≈ 1 分钟

先放源码：

1
2
3
4
5
6
7
8
.content {
    background-color: rgba(0,0,0,0.3);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

另外有两点需要注意：

  1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
  2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。

阅读原文：css毛玻璃效果.

本文永久链接: https://www.mulianju.com/css3毛玻璃效果/