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

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

Javascript: 用Javascript实现锚点(Anchor)间平滑跳转; 实现png图片和png背景透明（支持多浏览器）的方法; 一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能; 用DIV完美模拟createPopup 弹出窗口(修正版)，支持Firefox,ie,chrome; JavaScript 中级笔记第一章; IE与Firefox在JavaScript上的7个不同写法小结; MooTools 1.2介绍; Mootools 1.2教程(2) DOM选择器; Mootools 1.2教程(3) 数组使用简介; 在IE下获取object（ActiveX）的Param的代码; ExtJS 配置和表格控件使用; javascript 缓冲效果实现代码推荐; html数组字符串拼接的最快方法; JavaScript 浮动定位提示效果实现代码; 类似CSDN图片切换效果脚本; javascript 面向对象编程 function也是类; javascript 面向对象编程聊聊对象的事; javascript 面向对象编程 function是方法(函数); [原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]; jQuery slider Content(左右控制移动)

No. « ‹ 226 227 228 229 › »

技术文章搜索

关键字

Javascript 中的 CSS Filter背景透明提示

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

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