将背景图像应用到正文后，菜单按钮背景将被覆盖，如下所示。我希望菜单按钮保持可见性。
图片链接如下 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);
}
最佳答案
您确定按钮在没有背景图像时不会因为不透明度太低而看起来是灰色的吗？
当您随后应用背景图像时，您看不到按钮的背景颜色，因为不透明度太低且背景颜色太浓。
暂时更新#menu li a，看看问题是否还存在。
background: #FF0000;
关于html - 菜单按钮背景被页面图像背景覆盖，我该如何防止这种情况发生？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8524201/