应用-webkit过滤器：在HTML标记中模糊全屏背景_Html_Css

应用-webkit过滤器：在HTML标记中模糊全屏背景

html css

应用-webkit过滤器：在HTML标记中模糊全屏背景,html,css,Html,Css,我正在尝试申请： -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); 在我的HTML标签中定义的全屏背景。我更愿意保留此标签中定义的背景。我读过其他要求在body标签中定义背景的帖子，但我最好不要过度重组 html { background: url(../img/footballbg.jpg) no-repe

我正在尝试申请：

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

在我的HTML标签中定义的全屏背景。我更愿意保留此标签中定义的背景。我读过其他要求在body标签中定义背景的帖子，但我最好不要过度重组

html {
    background: url(../img/footballbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

关于如何应用于背景而不是子标签（正文等）有什么想法吗？

你的整个页面都被画出来了，然后整个页面都变得模糊了，所有的子页面都模糊了。如果你想一想，就没办法了

例如，如果你旋转你的html，你会期望其中的任何东西都被旋转，对吗？至少你可以把它旋转回去，但是你不能“取消模糊”…

要真正回答这个问题，你需要一个绝对用负z索引定位的元素或者一个类似样式的伪元素。这样，您只需设置背景样式，而不是内容。

如所述，您不能直接将其应用于

html

标记，但您可以使用伪类

：：before

来实现它：

<html>
    <head>
        <style>
        html {
            position: relative;
            min-height: 100%;
        }
        html::before {
            content: " ";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: url(http://placehold.it/600x400) top left repeat scroll;
            z-index: -1;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        </style>
    </head>
    <body>
        Heyyy, this text has not been blurred!
    </body>
</html>

而

filters.svg

（在本例中与css文件放在同一文件夹下）文件应包含：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
</svg>

*更新：在最新的firefox版本上，它正在运行：）（我目前使用的是37.0a2版）

我不是100%确定，但我希望模糊

html

会模糊页面上的所有内容，身体也是如此。我最近在玩模糊背景的游戏，我发现最好的方法就是用背景制作一个固定的div，然后应用到上面。模糊过滤器现在很弱。。。非常有限，资源非常密集。用过滤器很难找到理想的解决方案，比如你想要实现的目标。这很公平——我会仔细考虑一下。非常正确——我从来没有这样想过。谢谢

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
</svg>