Div模糊了它的背景

Question

我想在此页面上重新创建效果：http://goalkicker.com/Angular2Book/

这里有趣的事情：

我已经在StackOverflow上找到了一些关于此问题的主题，但其中一些参考资料不起作用，一些使用的方法与Chrome不兼容。基本上我没有找到任何有效的例子。

在我提供的网站上，div有以下CSS：

#headerBackground {
    width: 100%;
    min-height: 50px;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #ffffff;
    z-index: 3;
    opacity: 0.6;
    box-shadow: 0px 0px 18px 0px #cccccc;
}

他显然是不够的，＆＃34;模糊/玻璃＆＃34;部分缺失。是否有可能看起来更深入＆＃34;进入网站的内部，以揭示它是如何完成的？

Answer 1

您必须在底部的标记之前放置类似于以下内容的div。

这是标题

<div style="left: 0px; z-index: 2; overflow: hidden; top: 0px; position: fixed; width: 1349px; height: 50px;">
    <div style="position: absolute; background-color: rgb(255, 255, 255); filter: blur(10px); z-index: 1; width: 1100px; height: 3672px; left: 125px; top: 90px;">
    </div>
</div>

这是针对页脚

<div style="left: 0px; z-index: 2; overflow: hidden; bottom: 0px; position: fixed; width: 1369px; height: 80px;">
    <div style="position: absolute; background-color: rgb(255, 255, 255); filter: blur(10px); z-index: 1; width: 1100px; height: 3672px; left: 125px; top: -130px;">
    </div>
</div>

如果需要，您可以将父div的宽度更改为100％而不是js生成的精确（我认为）。

这就是参考网站的模糊效果的完成方式。

Answer 2

-webkit-filter：blur（5px）; / * Safari 6.0 - 9.0 * /

filter：blur（5px）;