应用-webkit-过滤器：模糊到全屏背景HTML标签

我想申请：应用-webkit-过滤器：模糊到全屏背景HTML标签

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

任何想法如何应用到背景，而不是儿童标记（身体等）？

来源

2014-05-23 James Patrick

我不是100％确定，但我希望blured'html'会模糊页面上的所有内容，与body一样。我最近玩弄了模糊的背景，我发现的最佳方式是在背景中有一个固定的div，并适用于此。模糊过滤器现在非常薄弱......非常有限且非常耗费资源。像你想要实现的理想解决方案很难用滤波器来实现。 –

够公平 - 我会仔细研究一下。 –

您的整个页面正在绘制，然后变得模糊，所有的都是儿童。如果你仔细想想，没有办法。

例如，如果你旋转了你的html，你会期望它的任何东西都被旋转，对吧？至少你可以将它旋转回来，但是你不能'模糊'...

来源

2014-05-23 00:21:55 climbinghobo

非常真实 - 我从来没有想过这样。谢谢。 –

要真正回答这个问题，你需要一个绝对定位的元素，它带有负Z指数或者类似样式的伪元素。这样，你只是设计背景而不是内容。

来源

2014-07-02 17:06:05

正如所说的@climbinghobo，你不能直接将其应用到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>

您可以检查它的工作in this jsfiddle example。

另外，请记住，模糊效果不起作用在Firefox下但尚未（至少不在版本< 30.0 *）。得到它的工作，你需要使用svg filters：

html::before { 
    /* ... */ 
    -webkit-filter: blur(20px); 
    filter: blur(20px); 
    filter: url(filters.svg#blur); 
}

而且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）

来源

2014-07-02 17:40:14 elboletaire

应用-webkit-过滤器：模糊到全屏背景HTML标签

回答

相关问题