Question

我正在尝试让我的标题创建一个模糊效果。但显然效果并不好。

<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);。

请参阅this article（向下滚动页面）。

Answer 2

你可以这样做（你需要一些职位）：

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

这里看看：http://jsfiddle.net/3gd5t58o/3/

模糊滤镜效果标题

2 个答案: