css 秘密花园
http://dabblet.com/gist/d9f243ddd7dbffa341a4
场景,背景图片 + 毛玻璃遮盖
原理:利用background的cover特性,将毛玻璃的区域和大背景的区域一致,然后再加上 filter: blur(5px); 进行模糊,之后还得加上margin:-30px来兼容filter的特性,
body, main::before { background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed; }
由于直接对主区域进行模糊的话,会影响内容文字,所以使用::before来模糊,并且将层级居底即可
main { 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); } main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: -30px; z-index: -1; -webkit-filter: blur(20px); filter: blur(20px); }
body{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); }
bilibili上挖掘的
.page-info-wrp .bangumi-info-blurbg { position: absolute; background-size: 100%; background-position: center; width: 100%; height: 100%; top: 50%; left: 50%; margin: -215px -55%; z-index: 10; background-repeat: no-repeat; -webkit-filter: blur(40px); -moz-filter: blur(40px); -ms-filter: blur(40px); filter: blur(40px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); }