菜單按鈕背景被頁面圖像背景覆蓋，我如何防止這種情況？

將背景圖像應用到身體後，菜單按鈕背景將被覆蓋，如下所示。我想要菜單按鈕來保存他們的知名度。菜單按鈕背景被頁面圖像背景覆蓋，我如何防止這種情況？

鏈接圖像低於 http://s11.postimage.org/4ndla4hxf/111111111.jpg

/********markup********/ 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
</head> 
<body> 
    <div class="page"> 
     <header> 
      <div id="title"> 
       <h1>My MVC Application</h1> 
      </div> 
      <div id="logindisplay"> 
       @Html.Partial("_LogOnPartial") 
      </div> 
      <nav> 
       <ul id="menu"> 
        <li >@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
       </ul> 
      </nav> 
     </header> 
     <section id="main"> 
      @RenderBody() 
     </section> 
     <footer> 
     </footer> 
    </div> 
</body> 
</html> 

/*******body***********/ 

body 
{ 

    font-size: .85em; 
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 

    background-image:url('/Content/bw.jpg'); 


} 

/*******menu**********/ 

#menu 
{ 


     position:relative; 
    float:left; 
    clear:left; 
    margin-right:50px; 

} 

#menu li 
{ 

    list-style-type: none; 
    padding: 0px; 
    display: block;  
     width:150px; 
    overflow:visible; 

} 

#menu li a 
{ 
     overflow:visible; 
     background: rgba(0,0,0,0.2); 
     text-shadow: 0px 0px 1px white; 
     color: white; 
    text-decoration: none; 
    font-size: 13px; 
    display: block; 
    font-family: arial; 
    text-transform: uppercase; 
    text-shadow: 0px 0px 5px #eee; 
    padding:10px 20px 10px; 
    margin: 5px; 
    font-weight: bold; 
    letter-spacing: 1px; 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    -ms-transition: all 0.2s linear; 
    transition: all 0.2s linear; 


    -webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6); 
    -moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6); 
    box-shadow: 2px 3px 3px rgba(0,0,0,0.6); 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 

} 



#menu li a:hover 
{ 
    opacity: 1; 
    color:White; 
    background:#FF00D0 ; 
    text-shadow: 0px 0px 1px #ffffff; 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 

} 


#menu li a:active { 
    background: rgba(0,0,0,0.1); 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
    box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
}

來源

2011-12-15 Xerxes

什麼瀏覽器？你可以發佈一個工作的例子，例如。在jsfiddle？ – ptriek

確定按鈕不要只看灰時，有沒有背景圖像透明度非常低。

然後，當您應用背景圖像時，由於不透明度太低而背景色太強，不能看到按鈕背景色。

暫時更新#menu li a並查看問題是否仍然存在。

background: #FF0000;

這裏舉例：http://benjaminhopkins.co.uk/BGLostExample.html

來源

2011-12-15 19:19:12

你是正確的，但我可以解決這個問題，而不必改變按鈕的背景？ – Xerxes

你將不得不調整'背景'值來使它們顯示，但應該很容易。如果你不需要它們，任何不透明度都會改變'＃CCC'的背景，或者如果你嘗試'rgba（210,210,210,0.8）' –

+1好的發現，benny！ – ptriek

菜單按鈕背景被頁面圖像背景覆蓋，我如何防止這種情況？

回答

相關問題