关于超链接上的遮罩效果,使用CSS,我们可以很容易的来实现。
但是有一点需要说明,该效果只能在IE中实现,在oprea或ns中就没办法实现,这是比较头痛的事情,在oprea或ns中要实现这种效果就必须做两张相似的图片,当然用js或flash也能做出这种效果,但是js或flash实现起来就比较麻烦,而使用css来实现就会比较简单。
下面是实现该效果的代码:
<style type="text/css"> a:link img,a:visited img,a:active img {filter:alpha(opacity=60);} a:hover img {filter:alpha(opacity=100);} img {border:0;} </style> <body> |
代码说明:
/*超链接图片样式*/
a:link img,a:visited img,a:active img {filter:alpha(opacity=60);}
a:hover img {filter:alpha(opacity=100);}
img {border:0;}
首先把img标签的边框属性设置为0,这样图片超链接时就不会有难看的蓝色边框显示,然后再设置图片超链接的四种状态,有链接时、访问过时、点过后这三种状态,图片的显示度为60%,只有鼠标置上这种状态图片显示度为100%,这样就实现了遮罩效果。