CSS Filter背景透明提示

更新时间：2009年11月03日 23:05:20 作者：

使用CSS的Filter滤镜实现的小效果，鼠标悬停时激活本效果，是一个半透明的图片提示层，本代码演示了核心的实现方法，你可以举一返三，作出更强大的效果来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS的Filter背景透明提示</title> <style> *{ margin:0; padding:0;} body{ margin:0 auto; font-size:12px;} .model{margin:0 auto; width:30px;} .model a:hover{ text-decoration:none;} .model a img{ border:#fff 1px solid;} .model a:hover img{ border:#888 1px dotted;} .model a span{ padding:0; display:block; width:80px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer; text-align:center;} .model a:hover span{ color:#fff; background:#000; padding:0; display:block; width:84px; height:54px; margin:-36px 0 0 1px!important; margin:-36px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60); opacity:.6; text-align:left; text-align:center;} .model2{margin:0 auto; width:30px;} .model2 a:hover{ text-decoration:none;} .model2 a img{ border:#fff 1px solid;} .model2 a:hover img{ border:#888 1px dotted;} .model2 a span{ padding:0; display:block; width:180px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer; text-align:center;} .model2 a:hover span{ color:#fff; background:#000; padding:0; display:block; width:480px; height:16px; margin:-36px 0 0 1px!important; margin:-20px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60); opacity:.6; text-align:left; text-align:center;} </style> </head> <body> <div class="model"><a href="#"><img src="/upload/2009-11/20091103230519197.jpg" border="0" /><span>我可爱吗？</span></a></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript 拖拽翻页效果代码
拖动翻页代码，很多人都想拥有这样一个功能，现在于JavaScript配合CSS终于实现了，个人感觉真的很不错，按住鼠标左键向某一方向拖动即可完成分页动作，符合WEB标准，兼容多浏览器。
2010-03-03
javascript背景颜色按时变换
javascript背景颜色按时变换...
2007-05-05
一种让页面完全把过来显示的脚本代码
一种让页面完全把过来显示的脚本代码...
2007-09-09
背景，文字渐变（无闪屏）
背景，文字渐变（无闪屏）...
2007-02-02
jQuery实现拉动页面固定顶部显示且自动消失(火狐)
jQuery拉动页面固定顶部显示，自动消失，看到这几个字就感觉很时尚，在测试过程中ie浏览器下有问题，不过火狐什么的都可以运行看效果，一个简单的网页特效，也是很常用的“回到顶部”效果，有兴趣的看一下
2012-12-12
JavaScript判断窗口是否最小化的代码(跨浏览器)
有些朋友需要判断页面是不是被最小化了，然后再进行相应的操作。
2010-08-08
仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]
比较不错的模仿3721的页面模块拖动效果代码
2008-09-09
JS实现简洁(隔行换色、高亮显示)表格特效
JS实现的表格，使用JavaScript编写实现一个简洁的表格，大家参考一下，加入了隔行换色，并且鼠标滑过时还有高亮显示特效，我看到了都目瞪口呆确实相当不错，有兴趣的朋友可以参考下
2012-12-12
javascript实现的仿腾讯QQ窗口抖动效果代码
JS实现的腾讯QQ窗口抖动效果代码,类似qq的抖动效果
2008-09-09
内部的小页面，用层制作，随机变色
2008-02-02

CSS Filter背景透明提示

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具