CSS Filter背景透明提示- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > CSS Filter背景透明提示

Javascript: jQuery开发者都需要知道的5个小技巧; Extjs学习笔记之六面版; Javascript 中的类和闭包; IE6下JS动态设置图片src地址问题; Extjs学习笔记之七布局; Extjs学习笔记之八继承和事件基础; Extjs TriggerField在弹出窗口显示不出问题的解决方法; JavaScript中的集合及效率; 利用js获取服务器时间的两个简单方法; 在html页面上拖放移动标签; 了解jQuery技巧来提高你的代码; JavaScript 页面坐标相关知识整理; Javascript UrlDecode函数代码; JQuery 遮罩层实现(mask)实现代码; jQuery 页面 Mask实现代码; Javascript的构造函数和constructor属性; js或css文件后面跟参数的原因说明; 将CKfinder整合进CKEditor3.0的新方法; jQuery UI-Draggable 参数集合; jQuery 行级解析读取XML文件（附源码）

No. « ‹ 259 260 261 262 › »

技术文章搜索

关键字

Javascript 中的 CSS Filter背景透明提示

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 90 ::

收藏到网摘: n/a

MAC官方菜单纯CSS实现灰色会换色 CSS鼠标悬停菜单图片交换技术实现

使用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/tech/20100110/20100110114009_550a141f12de6341fba65b0ad0433500.jpg" border="0" /><span>我可爱吗？</span></a></div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

MAC官方菜单纯CSS实现灰色会换色 CSS鼠标悬停菜单图片交换技术实现

Javascript 中的 CSS Filter背景透明提示

评论 (0) All