css - 模糊滤镜效果头

Question

我正在尝试让我的页眉产生模糊效果。但显然它的效果不是很好。

http://jsfiddle.net/3gd5t58o/2/

<div id="header"></div>
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/10.jpg" alt=" "/>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> </svg>

CSS:

body {
    margin: 0;
}

#header {
    position: fixed;
    background: #000;
    height: 60px;
    width: 100%;
    clip: rect( top, offset of right clip from left side, offset of bottom from top, left);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    filter: url(blur.svg#blur);
}

有没有一种简单的方法可以让我的标题模糊其下的内容？

Answer 1

Safari 9+ 有一个 CSS backdrop-filter功能就是为了这个:

-webkit-backdrop-filter: blur(3px);

Chrome 支持 backdrop-filter: blur(3px); 如果打开了实验性 Web 平台功能标志。

参见 this article (向下滚动页面)。