转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html

<!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{width:820px;background:#fff;margin:0 auto;}
#bos ul{zoom:1;overflow:hidden;background:#fff;padding:5px 0 5px 5px;}
#bos ul li{width:260px;position:relative;overflow:hidden;float:left;margin:5px;background:#fff;}
.img_wrap{width:258px;border:1px solid #ccc;border-radius:15px;display:block;overflow:hidden;}
#bos ul li h2{width: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>

Css:背景色透明，内容不透明之终极方法！兼容所有浏览器的更多相关文章

  1. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. div背景透明内容不透明与0.5PX边框兼容设置

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

  3. background背景透明内容不透明

    .demo{ padding: 25px; background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */ background-color: ...

  4. 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法

    转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...

  5. 通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果。

    CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...

  6. css 背景透明文字(内容)不透明三种实现方法

    好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

  7. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  8. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  9. 兼容IE、Firefox的背景半透明内容不透明设置

    首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...

随机推荐

  1. Winform版本发布更新

      版本发布: 一.局域网共享文件方式   发布界面: 更新界面:   二.FTP方式 发布界面 更新界面:     (只会更新有变动的文件) 同步新增,替换与删除 实现方式XML(文件名+文件最后修 ...

  2. 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...

    原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...

  3. mysql 实现行号的方法——如何获取当前记录所在行号

    SELECT aaa,(@rowNum:=@rowNum+1) AS rowNoFROM tb_bbb,(SELECT (@rowNum :=0) ) bORDER BY tb_bbb.liushui ...

  4. SQL函数学习（十九）：CAST()函数和CONVERT()函数

    19.CAST()函数和CONVERT()函数 CAST()函数可以将某种数据类型的表达式转化为另一种数据类型 CONVERT()函数 也 可以将指定的数据类型转换为另一种数据类型 19.1 CAST ...

  5. CA*Layer（CATransformLayer－－CAGradientLayer）

    CATransformLayer CATransformLayer不同于普通的CALayer,因为它不能显示它自己的内容.只有当存在了一个能作用域子图层的变换它才真正存在.CATransformLay ...

  6. WebSphere MQ 入门指南

    WebSphere MQ 入门指南这是一篇入门指南.我们从最基本的概念说起: 基础概念 对于MQ,我们需要知道4个名词:队列管理器.队列.消息.通道:对于编程设计人员,通常更关心消息和队列,对于维护管 ...

  7. 概念学习（Concept Learning）

    从特殊的训练样例中归纳出一般函数是机器学习的核心问题.一般函数是对理想目标函数的函数逼近(function approximation).简而言之,从特殊到普通.与此对应的是演绎推理(deductiv ...

  8. myeclipse10.05安装aptana

    安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...

  9. iOS - VIPER 架构模式

    1.VIPER 从字面意思来理解,VIPER 即 View Interactor Presenter Entity Router(展示器(视图) 交互器 协调器 实体(数据) 路由器),迄今为止,划分 ...

  10. iOS - ASIHTTPRequest 网络请求

    前言 使用 iOS SDK 中的 HTTP 网络请求 API,相当的复杂,调用很繁琐,ASIHTTPRequest 就是一个对 CFNetwork API 进行了封装,并且使用起来非常简单的一套 AP ...