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 */
}

---

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

您可以在

主体中添加一个固定的
div
设置为100%宽度和高度。这将填充整个屏幕，您可以在其上放置半透明背景，也可以使用CSS3创建您想要的效果。
使用
id=“body\u 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 */
}

以下是一些结果，如果模糊是指模糊性：

这家伙在combo中使用了图像移动和不透明度技术，我知道你的用户看到的是一个模糊的网站，但如果没有简单的解决方案，那么也许可以拍摄你的rego页面的快照并覆盖图像，那么它可能会：


如果你想尝试复制你的rego页面，考虑到它可能是a）禁用的，b）最小的，那么你甚至可以尝试使用上面的图像技术并将其应用到节点集，用
CSS定位和
opacity
-idk If
zoom
抵消副本，这可能对你也有帮助。即使您的页面足够小，这显然也需要Javascript来复制节点，除非您的后端可以进行节点复制。只是个主意，真的。下面是一个非常糟糕、非常快速的例子：


这篇文章概括了高斯模糊在不处理图像时的一些限制和困难，并有一些有趣的链接：



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

<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;
    }


请注册等

提交
提交
提交
提交
提交
​
.集装箱{
宽度：500px；
高度：500px；
位置：相对位置；
边框：1px实心#CCC；
}
形式{
位置：绝对位置；
左：10px；
顶部：10px；
}
form.form0{
左：11px；
顶部：11px；
不透明度：0.1；
}
表格1{
左：8px；
顶部：8px；
不透明度：0.1；
变焦：1.02；
}
表格2{
左：11px；
顶部：11px；
不透明度：0.1；
变焦：1.01；
}
表格3{
左：9px；
顶部：9px；
不透明度：0.2；
}
表格4{
左：11px；
顶部：11px；
不透明度：0.1；
}
.覆盖{
宽度：250px；
高度：250px；
边缘顶部：50px；
左边距：自动；
右边距：自动；
边框：1px实心#666；
}
编辑（2015）：正在形成
过滤器
css属性。这使您可以编写规则，如
body{filter:blur（10px）；}
，从而模糊整个页面


据我所知，即使在html5、css3等“现代”时代，也没有跨浏览器的方式来模糊元素

对于IE（并且只有IE）有一个解决方案。也可以是，但据我所知，它只适用于Firefox

如果你对特定于浏览器的黑客行为感到满意，那就去吧，但是如果你需要这种效果在所有浏览器上都能工作，那你就不走运了

如果只想模糊文本，可以使用巧妙的文本阴影技巧：

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

还有一些模糊图像的方法，可以通过叠加图像的透明、移位副本，也可以通过

也许你可以将这些技术拼凑在一起，它将实现你想要的

但遗憾的是，目前大致的答案是：没有简单、全面的方法来模糊HTML中的内容

（我以为我们生活在未来，老兄？有什么好处？！）

附录：希望在望。在撰写本文时，一些webkit夜间版（“前沿版”）正在实现一些新功能。这个演示在我安装的任何webkit浏览器上都不起作用，所以它离主流还很远。
试试这个

body {
   filter:blur(3px);
}

您需要添加-moz-，-webkit-前缀（或使用类似PrefixFree的东西）
模糊效果，如模糊、模糊？或者像是变灰了。你需要更具体。你需要支持哪些浏览器/版本？在我看来，这太疯狂了-如果你用css隐藏内容，那么任何对css工作原理稍有了解的人都可以“解锁”你的页面并查看你的所有内容。为什么不显示一个静态模糊的内容截图（或类似的东西）呢？我不同意这是个坏主意，它可能只是增加了一种风格。我开始寻找一个类似的效果——在我的例子中，我在覆盖下模糊内容。所谓模糊，我的意思是在压缩时添加到.jpg图形中的“模糊”——你是指与xRobot相同的东西吗？即使css模糊是可能的，使用它来保护在线内容也很容易避免。但是，即使这个问题的动机可能是正确的，也可能不是正确的，“我如何在css中创建模糊效果？”这个实际问题是非常有效的。这是一个模糊的问题吗？这只会让它看起来褪色，对吗？@aaaidan看到这个例子了吗：基本上所有的文本都设置为透明颜色和文本阴影。这是一个很酷的演示！事实上，这是一个很好的效果，绝对等同于模糊。不幸的是，您只能在文本上使用该技术，而不能在图像、边框、填充等上使用该技术。（注意，该示例中的心脏是unicode心脏！鬼鬼祟祟！）我爱模糊演示被移动。这是新的URL:simurai.com链接404's now.goooooo链接rot！但是，meh，链接上面的文字描述基本上解释了现在死链接上发生的事情。@Danjah请将小提琴上的相关答案张贴到答案中；否则，当链接消失或被移动时，您的答案将变得毫无用处。@GeorgeStocker，开始吧！只是好奇——是否每个人都需要将他们的JSFIDLE输入添加到他们的答案、帖子中