整个网页上的模糊效果

Question

我想让我的网站上的未注册用户看到整个网页的模糊效果。

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

Answer 1

这里的一些结果，如果通过模糊你的意思是模糊：

这家伙使用图像平移和不透明技术康宝，我知道你的用户正在寻找一个模糊的网站，但如果没有简单的解决方法那么也许把你雷戈网页的快照，并覆盖在图像，然后它可能会做：

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

如果你想尝试复制您的雷戈页，因为它可能是一个）残疾人和b）最小，日也许你甚至可以在使用上述图像技术并将其应用于节点集时使用bash，如果zoom也可以帮助您，那么使用CSS positioning和opacity来抵消副本 - idk。即使你的页面足够小，这显然需要Javascript来复制节点，除非你的后端可以做这个节点的重复。只是一个想法，真的。这里是一个非常可怕的，很简单的例子：

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

这SO帖列出了一些限制，并用高斯模糊的困难时，无法与图像做的，有一些有趣的链接：

Gaussian Blur onHover Using 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; 
    } 

Answer 2

您可以将设置为100％宽度和高度的固定div添加到您的body。这将填满屏幕，并且您可以在其上放置半透明背景或使用CSS3创建您要查找的效果。

Answer 3

用id="body_bag"创建一个新的div标记，并将该网站的其余部分编辑在div之内，并使用以下css来给出模糊效果。

#body_bag { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); /* required for opacity to work in IE */ 
} 

Answer 4

编辑（2015）：filter css属性正在形成tantalisingly complete coverage。这使您可以编写像body { filter: blur(10px); }这样的规则，使整个页面变得模糊。

---

从我可以告诉，有模糊的元素没有跨浏览器的方式，即使在HTML5，CSS3等这个“现代” ......

没有为IE浏览器blur filter （和只有 IE）。一个svg blur filter也可以是applied to an html element，但从我可以告诉，它只适用于Firefox。

如果您对浏览器特定的黑客感到高兴，请继续，但如果您需要该效果在所有浏览器上运行，那么您将失去运气。

如果只是要模糊的文字，你可以用一个巧妙的文字阴影招：，无论是覆盖透明

.blurry { 
    color: transparent; 
    text-shadow: 0 0 3px black; /* set to colour you want */ 
} 

也有办法来模糊图像，移动图像的副本，或通过processing the data with javascript。

也许你可以拼凑这些技术，它会达到你想要的。

但是，现在令人遗憾的是，现在的广泛答案是：没有简单，全面的方式来模糊HTML中的内容。

（我以为我们活在未来，人是什么给了？！？）

附录：希望就在眼前。在写这篇文章的时候，一些webkit每晚（“最先进的”）构建正在实现一些新的css filter specification。这个演示在我安装的任何webkit浏览器上都不起作用，所以它还远没有成为主流。

Answer 5

尝试......

body { 
    filter:blur(3px); 
} 

你需要添加-moz-，-webkit-前缀（或使用像PrefixFree）