如何实现按钮底部半透明,但是不影响按钮的字体正常显示

来源:互联网 发布:linux vi 文件末尾 编辑:程序博客网 时间:2024/05/01 12:56

这里写图片描述
有很多banner的图片都有两个半自动的按钮(所谓半自动就是需要人为触发的事件),字体颜色不受背景颜色的半透明影响。它的思路是首先定义一个外层(div,span…..),内层加一个标签作为按钮,一个标签作为背景。结构为:

<div>    <a href="javascript:;" name="prev">prev</a>    <span class="btn_bg"></span></div>

需要注意的时候css的设置有要求
首先要将背景标签充满整个外部标签,然后背景标签设置为白色,使用opacity进行透明设置

background-color: rgb(255, 255, 255);  filter: alpha(opacity=50);  /*兼容IE */opacity: 0.5;

然后背景标签的z-index小于按钮标签的z-index(注意z-index要与定位一起使用,不然没有效果);

这样就成功设置半透明的按钮。

但是如何实现鼠标悬浮时半透明的按钮背景变得更浅或更深啊?接着看下一篇文章。

阅读全文
0 0
原创粉丝点击