runxinzhi.com
首页
百度搜索
Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
没有过多的文字,直接看效果。
<!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=utf-8"/> <title>Css:背景色透明,内容不透明之终极方法!兼容所有浏览器</title> <style type="text/css"> *{margin:0;padding:0;} body{background:#3f3f3f;font-family:"宋体", Arial;} h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%;} img{border:none 0;} #bos{820px;background:#fff;margin:0 auto;} #bos ul{zoom:1;overflow:hidden;background:#fff;padding:5px 0 5px 5px;} #bos ul li{260px;position:relative;overflow:hidden;float:left;margin:5px;background:#fff;} .img_wrap{258px;border:1px solid #ccc;border-radius:15px;display:block;overflow:hidden;} #bos ul li h2{100%;height:0px;line-height:50px;color:#fff;text-indent:1em;font-size:14px;font-family:微软雅黑;position:absolute;bottom:0px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#44000000',endColorstr='#44000000');background:rgba(0,0,0,.6);} </style> </head> <body> <div id="bos"> <ul> <li> <a class="img_wrap" href="#"><img src="http://i2.vanclimg.com/users/18/20120824/n1_120824.jpg" alt="" /></a> <h2>网站防诈骗重要提示 购物满59元免运费</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i1.vanclimg.com/users/18/20120824/r1_120824.jpg" alt="" /></a> <h2>Android客户端升级新体验 配送延误通知</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i1.vanclimg.com/users/18/20120824/f8_120824.jpg" alt="" /></a> <h2>陈年谈品牌的本分 工行e支付可直减60元</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i2.vanclimg.com/users/18/20120824/n1_120824.jpg" alt="" /></a> <h2>陈年谈品牌的本分 工行e支付可直减60元</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i1.vanclimg.com/users/18/20120824/f8_120824.jpg" alt="" /></a> <h2>陈年谈品牌的本分 工行e支付可直减60元</h2> </li> <li> <a class="img_wrap" href="#"><img src="http://i2.vanclimg.com/users/18/20120824/n1_120824.jpg" alt="" /></a> <h2>陈年谈品牌的本分 工行e支付可直减60元</h2> </li> </ul> </div> <script type="text/javascript"> var bos = document.getElementById('bos'); var lis = bos.getElementsByTagName('li'); var len = lis.length; while (len--) { lis[len].onmouseover = function () { over(this.getElementsByTagName('h2')[0]); } lis[len].onmouseout = function () { out(this.getElementsByTagName('h2')[0]); } } function over(obj) { var ypos = 0; if (obj.time) { clearInterval(obj.time) } obj.time = setInterval(function () { if (ypos < 50) { ypos += Math.ceil((50 - ypos) / 3); } obj.style.height = ypos + "px"; }, 25); } function out(obj) { var ypos = 50; if (obj.time) { clearInterval(obj.time) } obj.time = setInterval(function () { if (ypos >= 0) { ypos -= Math.ceil((ypos - 0) / 3); } obj.style.height = ypos + "px"; }, 25); } // js代码解释权归华仔所有 </script></body> </html>
运行代码
相关阅读:
Dan Gillmor总结微软付费平息纠纷历史
从一份GIS试题谈GIS开发人员的技能和招聘
转载:赵勖予,废旧电脑配件的新用法next
百度败诉MP3搜索遭封杀
给人也装一个中断系统
ArcGIS Server 9.2的一些新特征
基于MA和CA的交通空间决策模型
Modeling Our World 读书笔记
卸载了NewsGator,开始使用Gougou
OpenOffice.org 2.0即将发布
原文地址:https://www.cnblogs.com/jikey/p/2665880.html
最新文章
持续集成之“分支策略”
[SCM]源码管理 简介
python类库31[正则表达式之sub]
数字签名(代码签名)流程
Shutdown远程重启机器
[在windows上使用Unix工具]gunwin32
python各种语言间时间的转化
[SCM]源码管理 TortoiseSVN
[SCM]源码管理 源代码的浏览和查询
[SCM]源码管理 mercurial
热门文章
[SCM]源码管理 perforce高级操作
利用LVM管理磁盘系统
[SCM]源码管理 Perforce
[SCM]源码管理 SVN + Apache
二进制文件比较
MGMaps: 手机上的Google Maps
令人失望的CSDN
《Excel与VBA程序设计》第四章新鲜出炉
偶和偶mm
选择OpenOffice.org 2.0的7个理由和选择MS Office的4个理由
Copyright © 2020-2023
润新知