对联 ·故事 ·史海钩沉 ·人物档案 ·地方风俗 ·谚语大全 ·讽刺与幽默 · 赚钱 · 法律 · 在线教研 · 会员中心 · 心理测试 · 魔鬼词典 · 顺口溜
 
主页特效 网页特效 百家姓
娱乐 歇后语 绕口令 脑筋急转弯
 
谚语 谜语 名言 邮政编码
便民 酒方 验方 偏方 站长工具  
 
算命 风俗 手相 爱情
女孩 音乐 面相 星座 血型
 
饮食 穴道 偏方 医药
生活 软件 硬件 解梦 高考



   JS特效



实用工具
便民服务 加密解密
 
魅力高密 民间故事 Flash教程 PS教程 最新国内新闻
新华字典 黄道吉日 英语园地  万年历 Html2anycode
  首页 | 美图 | 短信 | 安全 | 校园 | 网站 | 游戏 | UFO | 文秘 | 生活 | 信息技术 | 论文 | 人生 | 情感 | 日记
返回首页
当前位置: 主页 > 网站建设 >

用CSS实现图片超链接上的遮罩效果

时间:2009-12-29 00:07来源:未知 作者:文达 点击:
关于超链接上的遮罩效果,使用CSS,我们可以很容易的来实现。 但是有一点需要说明,该效果只能在IE中实现,在oprea或ns中就没办法实现,这是比较头痛的事情,在oprea或ns中要实现这种效果
  


 

关于超链接上的遮罩效果,使用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 href=http://www.panpan.org><img src=/Article/UploadFiles/200811/20081118211312708.gif alt=盼盼的家园></a>


代码说明:
/*超链接图片样式*/
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%,这样就实现了遮罩效果。

 

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
赞助商位置
推荐内容
杂七杂八