模糊只有一个巨大元素的背景

Question

我有一个固定的巨大背景的页面 - 如：

body {
    background: url(...) no-repeat center center fixed;
}

现在，为了从背景图像中删除一些焦点，我想到了在真实内容开始时简单地模糊它。考虑一个透明的jumbotron，然后是一个包含所有内容的巨型div。示例标记：

<div id="navigation">
    <nav>...</nav>
</div>
<div id="page">
    <div class="transparent-jumbotron">
        Big intro to the site goes here
    </div>
    <div class="content">
        The actual content goes here
    </div>
</div>
<div id="footer">...</div>

我一直在互联网上尝试各种提示和技巧 - 但我得到的最多的是#page.contents有网站的背景 - 但滚动了一下，结果发现有一个背景实例覆盖原始，然后有正常，不模糊的背景。此内容div还具有通过rgba()应用的半透明背景，以使背景变暗。

所以我的问题是：如何模糊网站的较大部分，该网站具有固定的背景图像，但需要滚动的内容很多（如动态应用模糊滤镜）？

Answer 1

您应该在css中使用opacity属性

opacity : <A number between 0 and 1, e.g:0.5 1 is fully focused and 0 makes the elmend hidden >;