QQ 1640076782

2013年12月30日

CSS实现自动适应宽度的半透明二级导航菜单

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 10:21 上午

最近的一个网站应客户要求需要二级菜单,而且二级菜单的背景色还是半透明,我们都知道如果一个层设置为半透明,那么这个层里面的内容也会半透明,如果要想内容正常,又与二级菜单产生冲突!经过多次测试,总算找到了一个完美的解决方案!

以下是最关键的CSS样式:

white-space: nowrap; /*这个样式主要是让二级菜单的宽度根据宽度自适应*

background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/

filter:Alpha(opacity=40);background:#000000;

看一下效果

而且是可以兼容多浏览器的。

至于二级菜单的效果,我就不再这里写了,网上有很多这方面的信息。如果有更好的方法欢迎交流!

如果你有外贸企业网站建站需求,欢迎随时联系我们

QQ客服:415682727

电话:020-39907297

MSN:[email protected]