HTML - 毛玻璃 滤镜 模糊

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);
}

 

转载于:https://www.cnblogs.com/CyLee/p/5840448.html