在粘性导航栏的背景中添加一个css过滤器

我正在尝试制作一个透明或不透明的粘性导航栏，并在其背景中添加一些类似css过滤器的模糊。我最终制作了两个尺寸相同的重叠导航条。一个带文本，另一个带过滤器(它们都是透明或不透明的(，所以过滤器不会应用于文本，只应用于背景，但过滤器似乎不起作用。这是代码：

body {
margin: 0px;
}
nav {
height: 56px;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: baseline;
background: rgba(255, 255, 255, 0.5);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
.menu {
flex: 1;
width: 40%;
display: flex;
justify-content: center;
}
.menu>p {
text-align: center;
margin-left: 5%;
margin-right: 5%;
}
nav p:hover {
cursor: pointer;
}
.background {
height: 63px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
filter: blur(8px);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="menu">
<p>Example</p>
<p>Example</p>
<p>Example</p>
</div>
</nav>
<div class="background">
</div>
<main>
<img src="https://3.bp.blogspot.com/-yvHXo7HtHDE/UATxfDGF1BI/AAAAAAAAFFM/hFE4J9QtiYQ/s1600/Landscape.jpg">
</main>
</body>
</html>

您可以尝试使用背景滤镜来实现此效果

body {
margin: 0px;
height: 1200px;
}
nav {
height: 56px;
display: flex;
justify-content: space-between;
align-items: baseline;
background: rgba(255, 255, 255, 0.5);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
.menu {
flex: 1;
width: 40%;
height: 100%;
display: flex;
justify-content: center;
backdrop-filter: blur(10px);
}
.menu > p {
text-align: center;
margin-left: 5%;
margin-right: 5%;
}
nav p:hover {
cursor: pointer;
}
main {
margin-top: -66px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="menu">
<p>Example</p>
<p>Example</p>
<p>Example</p>
</div>
</nav>
<main>
<img
src="https://3.bp.blogspot.com/-yvHXo7HtHDE/UATxfDGF1BI/AAAAAAAAFFM/hFE4J9QtiYQ/s1600/Landscape.jpg"
/>
</main>
</body>
</html>

只需在CSS代码之前为"nav"元素的：：设置此模糊过滤器，如下所示：

body {
	margin: 0px;
}
nav {
	height: 56px;
	padding: 5px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;

}
nav::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: blur(8px);
z-index: 3;
background: rgba(255, 255, 255, 0.38);
}
.menu {
	flex: 1;
	width: 40%;
	display: flex;
	justify-content: center;
position: relative;
z-index: 3;
}
.menu > p {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
}
nav p:hover {
	cursor: pointer;	
}
.background {
	height: 63px;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
	filter: blur(8px);
}

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	</head>
	<body>
		<nav>
			<div class="menu">
				<p>Example</p>
				<p>Example</p>
				<p>Example</p>
			</div>
		</nav>
		<div class="background">
		</div>
		<main>
			<img src="https://3.bp.blogspot.com/-yvHXo7HtHDE/UATxfDGF1BI/AAAAAAAAFFM/hFE4J9QtiYQ/s1600/Landscape.jpg">
		</main>
	</body>
</html>

相关内容

最新更新

热门标签：