停止一切從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

回答

相關問題