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

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

Javascript: javascript js cookie的存储,获取和删除; 得到元素真实的背景颜色的js代码; js获取url参数的使用扩展实例; javascript 屏蔽鼠标键盘的几段代码; 兼容IE FF Opera的javascript最短的拖动代码; 创建一个复制UBB软件信息的链接或按钮的js代码; js实现iframe动态调整高度的代码; 浏览器无法运行JAVA脚本的解决方法; js让弹出新窗口居中显示的脚本; js常见表单应用技巧; javascript 点击整页变灰的效果（可做退出效果）。; 制作符合用户体验的漂亮的input输入框; img的onload的另类用法; 解读IE和firefox下JScript和HREF的执行顺序; 用javascrpt将指定网页保存为Excel的代码; 语义化 H1 标签; JavaScript中Math对象使用说明; JavaScipt基本教程之前言; JavaScipt基本教程之JavaScript语言的基础; JavaScipt对象的基本知识

No. « ‹ 90 91 92 93 › »

技术文章搜索

关键字

Javascript 中的 CSS Filter背景透明提示

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

收藏到网摘: 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