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

2022-02-26 10:55:21 字數 975 閱讀 7828

先上效果圖:

寫部落格不管是做筆記還是幹啥,直接上原始碼不行麼,還不放效果圖,拆分成幾段誰慢慢看,慢慢理解去

自己動手,豐衣足食,上**:

doctype html

>

<

html

lang

="en-us"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>高斯背景模糊效果(毛玻璃)

title

>

<

style

>

.box

.content

/*filter是對該元素的模糊,因此對content新增並模糊偽元素,並定位到content的下層,而不是直接修改背景圖或content的樣式

*/.content::before

.content p

style

>

head

>

<

body

>

<

div

class

="box"

>

<

div

class

="content"

>

<

p>高斯模糊文字介紹的,高斯模糊文字介紹的高斯模糊,文字介紹的,高斯模糊文字介紹的高斯模糊。文字介紹的高斯模糊,文字介紹的--紅葉都楓了紅葉都楓了紅葉都楓了@163

p>

div>

div>

body

>

html

>

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 毛玻璃模糊效果的精髓我覺得...

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

突然設計搞了一種想法,當遮罩層談起來的時候,能不能搞一種模糊讓使用者看不清遮罩層下面的內容 然後ui小姐姐說,要是做不出來 就不做了,我說能做出來,怎麼能讓ui小姐姐看不起呢 先看下 加模糊濾鏡之前的效果 然後加上模糊濾鏡之後的效果呢 是不是很不一樣呢 其實濾鏡這個東西很多前端小夥伴都知道這個東西 ...

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

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