如何用CSS把下拉菜单背景色弄成透明而上面的文字不透明

html-css012

如何用CSS把下拉菜单背景色弄成透明而上面的文字不透明,第1张

背景图定位用background-position其值有top、center、bottom,如将图直接放网页正中body{background:url(image.jpg)background-repeat:no-repeatbackground-position:center center},如果不设置容器背景此容器就是透明的了!

背景色样式使用 background: rgba(r, g, b, a)rgb是三颜色,参数a就是透明度,取值范围是0到1。

不过这条样式对IE6之类的老浏览器不起作用,得使用滤镜

<!–[if lt IE 7]>

<style type=”text/css”>

#example{

background-color:#000

filter:alpha(opacity=50)

zoom:1

}

</style>

<![endif]–>

怎么不贴出代码 

给你个思路

比如代码大概是这样子:

<ul>

<li><a href="">菜单</a></li>

<li><a href="">菜单</a></li>

</ul>

把最外层的ul设置背景图片。padding:10px

li设置margin-top:10px

a链接设置背景颜色任意,比如白色

这样下来的效果是,一个带有图片背景的菜单区域,通过菜单间隔可看到后面的背景图

最后,在a链接设置hover状态,a:hover{background:transparent} 

当鼠标滑过一个链接后,此链接原来设置的背景色没有了,这样就看到了ul的背景图

效果不错的 而且代码也非常少...

至于竖向折叠大同小异了..