css實現遮罩層高斯模糊,毛玻璃效果

2021-10-25 14:51:30 字數 1865 閱讀 2008

突然設計搞了一種想法,當遮罩層談起來的時候,能不能搞一種模糊讓使用者看不清遮罩層下面的內容

然後ui小姐姐說,要是做不出來 就不做了,我說能做出來,怎麼能讓ui小姐姐看不起呢

先看下 加模糊濾鏡之前的效果

然後加上模糊濾鏡之後的效果呢

是不是很不一樣呢 

其實濾鏡這個東西很多前端小夥伴都知道這個東西 

filter 屬性 則是 blur  單位是 px  其實上面的我設定了 5px 都很模糊了

都知道這個東西 但是 一次性就加成功 可能有點困難哈  

lorem ipsum dolor sit amet consectetur adipisicing elit. itaque, ea ex optio, mollitia placeat voluptate consequatur

dignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? quia iste soluta quas?

lorem ipsum dolor sit amet consectetur adipisicing elit. itaque, ea ex optio, mollitia placeat voluptate consequatur

dignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? quia iste soluta quas?lorem

ipsum dolor sit amet consectetur adipisicing elit. itaque, ea ex optio, mollitia placeat voluptate consequatur

dignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? quia iste soluta quas?lorem

ipsum dolor sit amet consectetur adipisicing elit. itaque, ea ex optio, mollitia placeat voluptate consequatur

dignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? quia iste soluta quas?lorem

ipsum dolor sit amet consectetur adipisicing elit. itaque, ea ex optio, mollitia placeat voluptate consequatur

dignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? quia iste soluta quas?

ui小姐姐

其實這個濾鏡就是 你想讓使用者在那個地方看到濾鏡 就在那個元素身上加上這個屬性  可能有的小夥伴認為我想在遮罩層上加上濾鏡 其實那樣效果不明顯 甚至可以說沒有呢

我們其實是想讓下面的文字模糊起來   那麼 我們就在section 那個標籤上加上那個屬性就可以了

section
關注我 持續更新前端知識

CSS毛玻璃模糊效果

class comment bk class top blur div class top class iconfont icon pinglun i li div comments div div div comment bk comments top blur top 毛玻璃模糊效果的精髓我覺得...

OpenCV利用高斯模糊可以實現毛玻璃的特效

1.理論知識 先看偉大的高斯分布 gaussian distribution 的概率密度函式 probability density function gaussian distribution normal distribution 其圖形特點為中間高,兩頭低,是鐘形曲線 bell shaped ...

純css高斯背景模糊(毛玻璃,偽元素,完整例項)

先上效果圖 寫部落格不管是做筆記還是幹啥,直接上原始碼不行麼,還不放效果圖,拆分成幾段誰慢慢看,慢慢理解去 自己動手,豐衣足食,上 doctype html html lang en us head meta charset utf 8 title 高斯背景模糊效果 毛玻璃 title style ...