停止一切从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-index不起作用。任何帮助如何使一切正常，只是背景模糊是赞赏，

谢谢。

来源

2015-11-04 Thrys5

你可以使用一个'：after'元素包含模糊，无论你摆在那。否则，请参阅下面的答案 - 它告诉你问题是什么。 – somethinghere

过滤器会按照预期影响父元素中的所有内容，因此您需要将过滤器移到不应受到影响的范围之外。

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

来源

2015-11-04 16:48:39 Scott

是的，这是一些奇怪的HTML。如果这打破了他的代码，他总是可以使用'：after'元素来显示背景并模糊它。 – somethinghere

斯科特的回答工作得很好，

另一个解决方案是该already answered question

来源

2015-11-04 17:52:36

停止一切从HTML CSS

回答

相关问题