Question

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

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

Answer 1

试试这个......

body {
   filter:blur(3px);
}

你需要添加-moz-， - webkit-前缀（或使用像PrefixFree这样的东西）

Answer 2

以下是一些结果，如果模糊，则表示模糊：

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

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

如果您想尝试复制您的rego页面，因为它可能是a）禁用而b）最小化，那么也许您甚至可以使用上述图像技术并将其应用于节点集，抵消副本使用CSS positioning和opacity - idk如果zoom可能对您有帮助。即使您的页面足够小，这显然也需要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 3

修改（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 nightly（“前沿”）构建正在实现一些新的css filter specification。该演示不适用于我安装的任何webkit浏览器，因此它还远未成为主流。

Answer 4

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

Answer 5

使用div创建一个新的id="body_bag"代码，并将其余的网站内容编辑到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 */
}

模糊整个网页的效果

5 个答案: