我注意到我的導航欄是透明的，我希望它不是。我沒有以前的透明度/透明度設置，會導致它繼承屬性。我想讓我的導航欄不透明。<nav>元素透明，沒有任何以前的不透明度/透明度調整HTML/CSS

這裏是CSS：

nav { 
margin: 20px auto; 
text-align: center; 
} 
nav ul ul { 
display: none; 
} 
nav ul li:hover > ul { 
display: block; 
} 
nav ul { 
font-size: 25px; 
background: white; 
padding: 0px; 
border-radius: 10px; 
border-style: solid; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
content: ""; 
clear: both; 
display: block; 
} 
nav ul li { 
float: left; 
} 
nav ul li:hover { 
background: black; 
} 
nav ul li:hover a { 
opacity: 1; 
color: white; 
} 
nav ul li a { 
display: block; 
padding: 15px 20px; 
color: black; 
text-decoration: none; 
} 
nav ul ul { 
background: #000000; 
border-radius: 0px 0px 10px 10px; 
padding: 0; 
position: absolute; 
top: 100%; 
} 
nav ul ul li { 
float: none; 
} 
nav ul ul li a { 
padding: 15px 20px; 
} 
nav ul ul li a:hover { 
background: #2E2E2E; 
border-radius: 10px; 
} 


#welcome_paragraph { 
position: relative; 
top: 50px; 
width: 500px; 
margin: auto; 
}

下面是相應的HTML：

<nav> 
<ul> 
    <li><a href="#">Information</a> 
    <ul> 
     <li><a href="#">Getting Started?</a></li> 
         <li><a href="#">About Us</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Starter Kits</a></li> 
       <li><a href="#">Rebuildables</a> 
        <ul> 
         <li><a href="#">Genesis</a></li> 
         <li><a href="#">Dripper</a></li> 
         <li><a href="#">Silica/Cotton</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Mods</a> 
        <ul> 
         <li><a href="#">Mechanical</a></li> 
         <li><a href="#">Variable Voltage</a></li> 
        </ul>  
       </li> 
       <li><a href="#">Accessories</a></li> 
      </ul> 
     </nav> 
<p id="welcome_paragraph"> 
Welcome, blah blah (this text shows through the nav bar)<br /> 
</p>

來源

2014-01-22 Alek Hurst

upvote並標記答案所以這將有助於someine在未來 –

HTML

<nav> 
    <ul> 
     <li><a href="#">Information</a> 

      <ul> 
       <li><a href="#">Getting Started?</a> 
       </li> 
       <li><a href="#">About Us</a> 
       </li> 
       <li><a href="#">Contact</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Starter Kits</a> 
     </li> 
     <li><a href="#">Rebuildables</a> 

      <ul> 
       <li><a href="#">Genesis</a> 
       </li> 
       <li><a href="#">Dripper</a> 
       </li> 
       <li><a href="#">Silica/Cotton</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Mods</a> 

      <ul> 
       <li><a href="#">Mechanical</a> 
       </li> 
       <li><a href="#">Variable Voltage</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Accessories</a> 
     </li> 
    </ul> 
</nav> 
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar) 
    <br /> 
</p>

CSS

nav { 
margin: 20px auto; 
text-align: center; 
} 
nav ul ul { 
display: none; 
} 
nav ul li:hover > ul { 
display: block; 
} 
nav ul { 
font-size: 25px; 
background: white; 
padding: 0px; 
border-radius: 10px; 
border-style: solid; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
content: ""; 
clear: both; 
display: block; 
} 
nav ul li { 
float: left; 
} 
nav ul li:hover { 
background: black; 
    position:relative; 
z-index:1; 
} 
nav ul li:hover a { 
color: white; 
position:relative; 
z-index:1; 
} 
nav ul li a { 
display: block; 
padding: 15px 20px; 
color: black; 
text-decoration: none; 
} 
nav ul ul { 
background: #000000; 
border-radius: 0px 0px 10px 10px; 
padding: 0; 
position: absolute; 
top: 100%; 
} 
nav ul ul li { 
float: none; 
} 
nav ul ul li a { 
padding: 15px 20px; 
} 
nav ul ul li a:hover { 
background: #2E2E2E; 
border-radius: 10px; 
} 


#welcome_paragraph { 
position: relative; 
top: 50px; 
width: 500px; 
margin: auto; 
    color:white; 
} 
body 
{ 
    background-color:blue; 
}

更新CSS你的

nav ul li:hover { 
background: black; 
    position:relative; 
z-index:1; 
} 
nav ul li:hover a { 
color: white; 
position:relative; 
z-index:1; 
}

Updated Fiddle

來源

2014-01-22 06:15:54

即使在小提琴它對我來說依然透明。也許這是一個瀏覽器的東西？ –

嘗試將大量文字粘貼到#welcome_消息中，並通過 –

@AlekHurst顯示您不希望消息出現或應該出現？ –

您是否嘗試過;

nav { 
    background: white; 
}

元素是透明的，除非您在它們或其繼承的背景上設置背景。

編輯：如果這不幫助爲我們設置一個小提琴jsfiddle.net。

來源

2014-01-22 06:03:05

是我已經試過這個，沒有成功 –

在你的CSS

nav ul { 
font-size: 25px; 
background: white; 
padding: 0px; 
border-radius: 10px; 
border-style: solid; 
list-style: none; 
position: relative; 
display: inline-table; 
}

背景是白色的。

如果您將背景更改爲其他顏色，可能您的問題將會消失。希望它會幫助

乾杯！

來源

2014-01-22 06:06:34

感謝您的迴應，我已經試過這個，它不是成功 –

<nav>元素透明，沒有任何以前的不透明度/透明度調整HTML/CSS

回答

Updated Fiddle

相關問題