模糊整个网页的效果

Question

我希望我网站上未注册的用户看到整个网站的页面具有模糊效果.

如何用css创建这种模糊效果？

Answer 1

试试这个...

body {
   filter:blur(3px);
}

你需要添加-moz-, - webkit-前缀(或使用像PrefixFree这样的东西)

Answer 2

这里有一些结果,如果模糊,你的意思是模糊:

这个人在组合中使用图像移位和不透明技术,我知道你的用户正在看一个模糊的网站,但如果没有简单的解决方案,那么可能拍摄你的rego页面的快照并覆盖图像然后它可能会:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

如果你想尝试复制您的雷戈页,因为它可能是一个)残疾人和b)最少的,那么也许你甚至可以有在使用上述图像技术,将其应用于节点集,以抵消拷贝一个bash CSS positioning和opacity- idk如果zoom可以帮助你那里.即使您的页面足够小,这显然也需要Javascript来复制节点,除非您的后端可以执行此节点复制.只是一个想法,真的.这是一个非常糟糕,非常快速的例子:

http://jsfiddle.net/9qnsz/2/

这篇SO帖子概述了未使用图像时高斯模糊的一些限制和困难,并且有一些有趣的链接:

高斯模糊onHover使用jQuery

编辑:根据要求,jsfiddle的内容:

<div class="container">
    <div class="overlay">
        <p>Please register etc etc...</p>
    </div>

    <form action="javascript:;" class="form0">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form1">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form2">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form3">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form4">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>

</div>?


.container {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid #CCC;
}
    form {
        position:absolute;
        left:10px;
        top:10px;
    }
    form.form0 {
        left:11px;
        top:11px;
        opacity:0.1;
    }
    form.form1 {
        left:8px;
        top:8px;
        opacity:0.1;
        zoom:1.02;
    }
    form.form2 {
        left:11px;
        top:11px;
        opacity:0.1;
        zoom:1.01;
    }
    form.form3 {
        left:9px;
        top:9px;
        opacity:0.2;
    }
    form.form4 {
        left:11px;
        top:11px;
        opacity:0.1;
    }

    .overlay {
        width:250px;
        height:250px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #666;
    }