对整个网页的模糊效果 [英] Blur effect on the entire webpage

问题描述

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

我希望未注册的用户在我的网站上看到整个网站的页面有模糊的效果。 p>

解决方案

这里有一些结果，如果模糊是指模糊性：

家伙使用图像移位和不透明技术在组合，我知道你的用户正在看着一个模糊的网站，但如果没有简单的解决方案，然后也许拍摄您的注册页面的快照和覆盖图像，那么它可能做：

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

如果您想尝试复制您的rego页面，因为它可能是a）禁用和b）最小，那么也许你甚至可以使用上述图像技术bash，并应用于节点集，偏移副本 CSS定位和 opacity - idk if zoom 你也在那里。即使你的页面是最小的，这显然需要Javascript来复制节点，除非你的后端可以做这个节点复制。只是一个想法，真的。这是一个非常可怕，非常快的例子：

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

这篇文章概述了高斯模糊的一些限制和困难，当没有使用图像，一些有趣的链接：

高斯模糊使用jQuery

---

编辑：根据请求，jsfiddle的内容：

 < div class =container> 
< div class =overlay> 
< p>请注册etc等...< / p> 
< / div> 
 
< form action =javascript :; class =form0> 
< input type =textvalue =用户名/> 
< input type =textvalue =Password/> 
< button>提交< / button> 
< / form> 
< form action =javascript :; class =form1> 
< input type =textvalue =Username/> 
< input type =textvalue =Password/> 
< button>提交< / button> 
< / form> 
< form action =javascript :; class =form2> 
< input type =textvalue =用户名/> 
< input type =textvalue =Password/> 
< button>提交< / button> 
< / form> 
< form action =javascript :; class =form3> 
< input type =textvalue =用户名/> 
< input type =textvalue =Password/> 
< button>提交< / button> 
< / form> 
< form action =javascript :; class =form4> 
< input type =textvalue =用户名/> 
< input type =textvalue =Password/> 
< button>提交< / 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; 
} 
  

I want that the unregistered users on my website, see the entire website's pages with a blur effect.

How can I create this blur effect with css ?

解决方案

Here's some results, if by blur you mean fuzziness:

This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:

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

If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:

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

This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:

Gaussian Blur onHover Using jQuery

---

EDIT: As requested, the contents of the 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;
    }

这篇关于对整个网页的模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！