Question

css 弹出模态框modals后背景如何高斯模糊？

目前写了
body :not(.modal-fl){//除了.modal模态框类之外的部分高斯模糊// -webkit-backface-visibility: hidden; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);}

但是无效，全屏模糊。怎么实现背景高斯模糊呢？还有，如果我想要除了文字外的全部都高斯模糊呢？

最想要的效果~目前想知道的是模态不透明后面怎么模糊~

下面是除了heater之类具体类 我写的两个主要的类，求助！
.modal {//在这一层设计透明深颜色背景ok// display:none;//演示的时候要注销 overflow: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background-color: rgba(0,0,0,.5); -webkit-overflow-scrolling: touch; } .modal-fl{//真正模态框的主体 font-family: @font-family; width:768px; text-align:middle; margin: 6em auto; position: relative; background-color:white;// border: 1px solid #d0d0d0; border-radius: 0px; box-shadow: 0 3px 30px rgba(0,0,0,.15); background-clip: padding-box;//背景被剪裁到padding（也就是不含border） outline: 0; z-index: 101; }

Answer 1

<div class="page show-modal">
    <div class="container">主要内容</div>
    <div class="modal">浮层</div>
</div>

假设有这样的HTML结构，那么让 .modal 绝对定位在 .container 上面，.container 设置 blur 即可。

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.8);
}
.show-modal .modal {
    display: block
}
.show-modal .container {
    -webkit-filter: blur(4px);
}

演示：http://jsbin.com/nesewayosa/1/