css毛玻璃效果(外加background屬性)
前因:
後果,二話不說,上效果:
注意:此方法只適合body設定背景圖時的模糊。
頁面佈局方面,主要父元素為body,子元素為想要的效果,涉及到的知識點:background、filter、定位、偽元素、flex佈局(主要為子元素水平居中使用)、z-index=-1也是很重要的一個點。
-
background
簡單粗暴()
background: url('./timg1.jpg') no-repeat center fixed;
分別對應:背景圖片地址、平鋪效果、滾動、位置
同時也要標註背景圖片尺寸background-size
background-size: cover;
上圖:
-
filter
blur(px) 給影像設定高斯模糊。
附上Filter函式的地址
-
定位
常說的一句話“子絕父相”
-
偽元素
佈局中用了很多偽元素
z-index=-1,透過設定使父元素內容在內容下面
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>毛玻璃效果</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body, .item::before { background: url('./timg1.jpg') no-repeat center fixed; background-size: cover; } body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .item { position: relative; width: auto; height: auto; padding: 30px; border-radius: 10px; box-shadow: 0 0 5px 1px #fff; color: #fff; font-size: 15px; font-weight: lighter; line-height: 35px; overflow: hidden; } .item::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; margin: -20px; filter: blur(10px); /* blur(px) 給影像設定高斯模糊。"radius"一值設定高斯函式的標準差, 或者是螢幕上以多少畫素融在一起, 所以值越大越模糊; 如果沒有設定值,則預設是0;這個引數可設定css長度值,但不接受百分比值。 */ } </style> </head> <body> <div class="item"> <p> 沒有什麼比時間更具有說服力了,<br> 因為時間無需通知我們就可以改變一切。<br> ——《活著》<br> </p> </div> </body> </html>
若有不正確的地方請各位大佬指出,更多內容請參考:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2508/viewspace-2824273/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS 的 background 屬性CSS
- css的background屬性CSS
- CSS3的background屬性CSSS3
- CSS background-origin屬性CSS
- CSS屬性總結之backgroundCSS
- CSS3 background-size 屬性CSSS3
- 純CSS 毛玻璃效果CSS
- background 屬性
- background屬性
- CSS:遮罩效果、陰影效果、毛玻璃效果CSS遮罩
- CSS3背景裁切屬性——background-clipCSSS3
- background常用屬性
- 學習CSS的background屬性及其取值(實踐)CSS
- background相關屬性
- css詳解background八大屬性及其含義CSS
- background屬性用法詳解
- css自定義屬性和聚光燈效果CSS
- 毛玻璃效果
- CSS 奇思妙想 | 全相容的毛玻璃效果CSS
- background-attachment屬性進階
- 直播平臺原始碼,用CSS製作毛玻璃效果(高斯模糊效果)原始碼CSS
- 使用CSS background實現炫酷懸停效果CSS
- 純CSS3屬性animation實現的打字效果CSSS3
- CSS 屬性篇(七):Display屬性CSS
- 使用CSS3製作導航條和毛玻璃效果CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- background-size屬性用法簡單介紹
- css display 屬性CSS
- CSS perspective 屬性CSS
- CSS transform 屬性CSSORM
- css常用屬性CSS
- css的屬性CSS
- CSS3 background-position定位背景圖片動畫效果CSSS3動畫
- CSS background背景CSS
- CSS background 背景CSS
- CSS字型屬性和文字屬性詳解CSS
- 用ps做毛玻璃穿透效果穿透
- 鄭州iOS·點-毛玻璃效果iOS