Question

将背景图像应用到正文后，菜单按钮背景将被覆盖，如下所示。我希望菜单按钮能够保持其可见性。

链接到图片如下 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);  
}

Answer 1

当没有背景图像时，您确定按钮不会显示为灰色，因为不透明度太低。

然后当你应用背景图像时，你看不到按钮的背景颜色，因为不透明度很低，背景颜色很强。

暂时更新#menu li a并查看问题是否仍然存在。

    background: #FF0000;

此处示例：http://benjaminhopkins.co.uk/BGLostExample.html

菜单按钮背景被页面图像背景覆盖，我该如何防止这种情况？

1 个答案: