/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage">
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<a href="" target="_top"></a>
<br>Call:
<a href=""></a>
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</div>
</html>这是我的网站代码。我一直试图只模糊背景，但它模糊了一切。 z-index 似乎不起作用。任何关于如何使其他一切都很好的帮助，并且只是背景模糊表示赞赏，
谢谢。
最佳答案
正如预期的那样，过滤器会影响父元素中的所有内容，因此您需要将过滤器移到不应受到影响的任何内容之外。
在你的情况下，你可以关闭 <div id="backgroundimage"></div>在文档的“顶部”。
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage"></div>
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<a href="" target="_top"></a>
<br>Call:
<a href=""></a>
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</html>您还有一些奇怪的 HTML(正文不在 <body> 中)，但这似乎可以解决您的问题。
关于html - 阻止 HTML CSS 中的一切模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33527377/