CSS3打造磨砂玻璃的背景
生活随笔
收集整理的這篇文章主要介紹了
CSS3打造磨砂玻璃的背景
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡介
這個(gè)效果是在看CSS Secrets這書上看到的,感覺很不錯;
實(shí)現(xiàn)原理也挺簡單的;
效果圖及實(shí)現(xiàn)
效果圖
代碼實(shí)現(xiàn)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*** 設(shè)置背景圖全屏覆蓋及固定* 設(shè)置內(nèi)部元素偏移*/body {/*此處背景圖自行替換*/background: url(demo.jpg) no-repeat center center fixed;background-size: cover;min-height: 100vh;box-sizing: border-box;margin: 0;padding-top: calc(50vh - 6em);font: 150%/1.6 Baskerville, Palatino, serif;}/*** 整體居中功能；* 背景透明虛化* 溢出隱藏* 邊緣圓角化* 文字增加淡陰影*/.description{position: relative;margin: 0 auto;padding: 1em;max-width: 23em;background: hsla(0,0%,100%,.25) border-box;overflow: hidden;border-radius: .3em;box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0, 0, 0, 0.6);text-shadow: 0 1px 1px hsla(0,0%,100%,.3);}/*使用濾鏡模糊邊緣*/.description::before{content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;margin: -30px;z-index: -1;-webkit-filter: blur(20px);filter: blur(20px);}</style></head><body><p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></body> </html>總結(jié)
這種實(shí)現(xiàn)模式是考慮了性能來寫的,以及維護(hù)上的考慮
- 比如使用了em,可以很輕松的放大縮小整體大小
- 這里使用了hsla,這是我第一次使用這個(gè)顏色值;以前只在ps調(diào)整這個(gè),很不錯的顏色模式.和RGBA大同小異,但是HSLA更符合人類眼睛的觀看;
- 還學(xué)到了一種新的背景縮寫方式
總結(jié)
以上是生活随笔為你收集整理的CSS3打造磨砂玻璃的背景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 磨砂玻璃效果
- 下一篇： Flutter教程之Flutter 中的