Question

我的网站上有一个视频背景，希望在它上面有模糊覆盖。像IOS7通知中心的东西。因为我不能用Photoshop做到这一点。我想在CSS中使用模糊效果。它似乎也没有做我想要的。

然而，我做了一个div类宽度100％的高度和宽度。并选择白色作为背景，然后给它模糊元素。无论如何，它不会按我想要的方式工作。

#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
  -o-filter:blur(350px);
  -ms-filter:blur(350px);
  -moz-filter:blur(350px);
  -webkit-filter:blur(350px);
}

HTML：<div id="blur"> </div>

这是一个像我一样的例子：http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg 有什么想法吗？

Answer 1

CSS模糊滤镜会模糊图层的一部分，而不是图层后面或前面的内容。因此，您可能需要将此类过滤器直接应用于视频容器。

我不是100％确定这是你的问题，因为这个问题没有添加HTML。

<强>更新

我刚在YouTube.com上对此进行了测试，如果我将模糊滤镜直接应用于<video />元素，则视频会模糊不清。

Answer 2

不要以为我正确理解了这个问题。但是，如果您想在视频顶部添加白色图层，则需要在css代码中添加不透明度属性，以提供透明叠加效果。

opacity: 0.4;

您的代码应该看起来像

#blur{
   width: 100%;
   height: 100%;
   z-index: -1;
   position: fixed;
   background: #FFF;
   top: 0;
   filter:blur(350px);
     -o-filter:blur(350px);
     -ms-filter:blur(350px);
     -moz-filter:blur(350px);
     -webkit-filter:blur(350px);
   opacity: 0.4;
}

如何在背景上制作模糊效果

2 个答案: