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

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

Javascript: 给初学者提供几本学习js值得看的书; Javascript----文件操作; Vml+Js算法:完成5个小球在网页运动(碰壁返回)的游戏,详细注释; Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条; Dhtml+Js算法:5个小球运动的简化版,变通实现更简单的飞行的图片; Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了; 判断客户浏览器是否支持cookie; 几种常用的表单输入判断; CSDN无限级树数据库版(ASP+ACCESS); JavaScript 寫遊戲 : 俄羅斯方塊; JavaScript 寫遊戲 : 搬吖; JavaScript 遊戲 : 貪吃蛇; JavaScript 寫時鍾日曆; VML:经典的图片叠加效果(灰色调); 一个简单的仿xp的js下拉菜单; JScript 寫 sortNode; 关于javascript中数组元素删除问题的讨论; IE中非模式对话框(showModelessDialog)应用; Dhtml:用ondrag事件简单的实现鼠标拖动物件.; 对WebUI技术感兴趣的说

No. « ‹ 7 8 9 10 › »

技术文章搜索

关键字

Javascript 中的 CSS Filter背景透明提示

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

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