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

html-css024

如何用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]–>

首先下拉菜单的样式是可以改变的，最关键的步骤是在select外层包裹一个div。

具体如下：

首先准备好一个你想替换成的样式的背景图片，因为这个效果是通过设置背景图片实现的。

在select外层包裹一层div，设置select的border:noneoutline-style:none(去除边框和选中时的边框)

设置select的背景为你之前准备好的效果图片。

css中很多效果都是通过这种去除边框，设置背景透明，再加上自己想要的背景图片来实现的。有时候甚至将整个元素整个设置透明，用自己制作的样式来替换。