jquery - 透明模糊背景

Question

我正在开发一个使用 jsf 和 primefaces 的网络应用程序。

这里是我的一些 CSS，它使我的对话框变成白色透明:

.ui-dialog, .ui-dialog-footer {
    background: rgb(255, 255, 255);
    background: transparent\9;
    background: rgba(255,255, 255, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,
        endColorstr=#66000000);
    zoom: 1;
    border: none;
    color: black !important;
}

现在看起来像这样:

http://fs5.directupload.net/images/151201/2tutzmwh.png (看来我没有足够的积分在编辑器中分享该图片 xD

我想做的是使背景(仅在对话框后面)模糊，如果可能的话跨浏览器兼容；)允许 jquery...

filter: blurry(10px);

对我来说没用...考虑对话框是叠加层

感谢任何帮助

谢谢

Answer 1

您可以使用插件 http://blurjs.com blur.js

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/blur.js"></script>
$(document).ready( function() {
    $('#bg').blurjs({
        source: 'body',
        radius: 30,
        overlay: 'rgba(0, 0, 0, .2)'
    });
});

请尝试一下，它没有经过测试。