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

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

图片链接如下

/*******标记********/
@视图包。标题
我的MVC应用程序
@Html.Partial（“\u lognPartial”）

@Html.ActionLink（“主页”、“索引”、“主页”）
@ActionLink（“关于”、“关于”、“主页”）

@RenderBody（）
/*******身体***********/
身体
{
字体大小：.85em；
字体系列：“投石机MS”，Verdana，Helvetica，无衬线；
保证金：0；
填充：0；
背景图片：url（'/Content/bw.jpg'）；
}
/*******菜单**********/
#菜单
{
位置：相对位置；
浮动：左；
清除：左；
右边距：50px；
}
#菜单里
{
列表样式类型：无；
填充：0px；
显示：块；
宽度：150px；
溢出：可见；
}
#菜单李a
{
溢出：可见；
背景：rgba（0,0,0,0.2）；
文本阴影：0px 0px 1px白色；
颜色：白色；
文字装饰：无；
字体大小：13px；
显示：块；
字体系列：arial；
文本转换：大写；
文本阴影：0px 0px 5px#eee；
填充：10px 20px 10px；
保证金：5px；
字体大小：粗体；
字母间距：1px；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
-webkit盒阴影：2px 3px 3px rgba（0,0,0.6）；
-莫兹盒阴影：2p3p3pRGBA（0,0,0.6）；
盒影：2px 3px 3px rgba（0,0,0.6）；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
}
#菜单a：悬停
{
不透明度：1；
颜色：白色；
背景：#FF00D0；
文本阴影：0px 0px 1px#ffffff；
-webkit转换：比例（1.1）；
-moz变换：比例（1.2）；
-ms变换：比例（1.2）；
-o变换：比例（1.2）；
转换：比例（1.2）；
}
#菜单LIA:活动{
背景：rgba（0,0,0,0.1）；
-webkit盒阴影：1px 1px 1px rgba（0,0,0,0.4）；
-莫兹盒阴影：1px1px1pRGBA（0,0,0,0.4）；
盒影：1px1px1pRGBA（0,0,0,0.4）；
} 

你确定当没有背景图像时，按钮不会看起来是灰色的，因为不透明度很低

然后应用背景图像时，您无法看到按钮的背景色，因为不透明度太低，背景色太强

暂时更新

#菜单li a

，查看问题是否仍然存在

    background: #FF0000;

---

此处示例：

什么浏览器？您可以发布一个工作示例，例如在JSFIDLE中吗？您是正确的，但是我可以在不必更改按钮背景的情况下解决问题吗？您必须调整

background

值以使它们显示出来，但应该足够简单。如果您不需要任何不透明度，请将背景更改为

#CCC

或尝试

rgba（210210,0.8）

    background: #FF0000;