停止HTML CSS中的一切模糊

/* 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索引似乎不起作用。任何关于如何使其他一切都很好的帮助，以及只是背景模糊都是值得赞赏的，

谢谢。

正如预期的那样，过滤器会影响父元素中的所有内容，因此您需要将过滤器移到不应该受到影响的内容之外。

在您的情况下，您可以在文档的"顶部"关闭<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>中），但这似乎可以解决您的问题。

Scott的回答很好，

另一个解决方案是这个已经回答的问题

相关内容

最新更新

热门标签：