今天小编跟大家讲解下有关CSS3打造磨砂玻璃背景效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3打造磨砂玻璃背景效果 的相关资料，希望小伙伴们看了有所帮助。
简介
这个效果是在看CSS Secrets这书上看到的,感觉很不错;
实现原理也挺简单的;
效果图及实现
效果图
代码实现
CSS Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>document</title> <style> body{ background:url(demo.jpg)no-repeatcentercenterfixed; background-size:cover; min-height:100vh; box-sizing:border-box; margin:0; padding-top:calc(50vh-6em); font:150%/1.6Baskerville,Palatino,serif; } .description{ position:relative; margin:0auto; padding:1em; max-width:23em; background:hsla(0,0%,100%,.25)border-box; overflow:hidden; border-radius:.3em; box-shadow:0001pxhsla(0,0%,100%,.3)inset, 0.5em1emrgba(0,0,0,0.6); text-shadow:01px1pxhsla(0,0%,100%,.3); } .description::before{ content:''; position:absolute; top:0;rightright:0;bottombottom:0;left:0; margin:-30px; z-index:-1; -webkit-filter:blur(20px); filter:blur(20px); } </style> </head> <body> <pclass="description"> Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam, quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodo consequat.Duisauteiruredolorinreprehenderitinvoluptatevelitesse cillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnon proident,suntinculpaquiofficiadeseruntmollitanimidestlaborum. </p> </body> </html>总结
这种实现模式是考虑了性能来写的,以及维护上的考虑 - 比如使用了em,可以很轻松的放大缩小整体大小 - 这里使用了hsla,这是我第一次使用这个颜色值;以前只在ps调整这个,很不错的颜色模式.和RGBA大同小异,但是HSLA更符合人类眼睛的观看; - 还学到了一种新的背景缩写方式
CSS Code复制内容到剪贴板 background-color:#ff0; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:00; background-size:cover; background:#ff0url(background.gif)no-repeat/fixedcover;以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
