模糊固定标题

Question

我有一个小问题。我的网站中有一个固定的标题，但我有一个问题。我想仅模糊固定标题的背景而不是其上的按钮。

我的 Header.php ：

*{
    margin: 0;
    padding: 0;
}

html, body{
    position: relative;
    height: 100%;
    min-height: 100%;
}

#header{
    background-color: #F9F6F3;
	pacity: 0.00;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

<div id="header">
		<header id="fh5co-header" role="banner">
			<div class="container">
				<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle dark"><i></i></a>
				<div id="fh5co-logo"><a href="/"><img src="images/logo.png" height="50" width="95" alt="Hello World"></a></div>
				<nav id="fh5co-main-nav" role="navigation">
					<ul>
						<li><a href="about">About</a></li>
						<li class="has-sub">
							<div class="drop-down-menu">
								<a href="scl">Cool</a>
								<div class="dropdown-menu-wrap">
									<ul>
										<li><a href="#">Button1</a></li>
										<li><a href="#">Button2+n</a></li>
									</ul>
								</div>
							</div>
						</li>
					</ul>
				</nav>
			</div>
		</header>
</div>

现在的问题是如何从 css 中的 Header 中模糊背景？

Answer 1

将其添加到 html 标头

 <div class="background-image"></div>

把它放在你的风格标签中

header{position: relative;
}
header .background-image {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
 filter: blur(5px);}