css实现兼容常用浏览器
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 569
又好久没有写博客了,也不知道应该写点啥,不知道什么东西值得与大家分享。前些天看这个http://www.qikan.com.cn/Article/dnxx/dnxx200406/dnxx200406

又好久没有写博客了,也不知道应该写点啥,不知道什么东西值得与大家分享。

 

前些天看这个http://www.qikan.com.cn/Article/dnxx/dnxx200406/dnxx20040622.html网页时,发现他的那个文字渐变效果很有意思。今天没事就抓出来分析一下,并给出简化后的例子及简单的原理分析。

效果截图:

效果示例

例子源码:

  <style type="text/css">  .contMask{ background:url(http://www.qikan.com.cn/Skins/skin01/images/articleContent/contMask.png) ; width:100%; height:80px; position:absolute; bottom:0px;  _background:none;  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='http://www.qikan.com.cn/Skins/skin01/images/articleContent/contMask.png'); /*filer的用法我了解的不多,为了兼容ie6.大家可以查一下,ie中filter的用法。*/  }  #content{      position: relative;      width:600px;      height:130px;  }  </style>  </head>  <body>  <div id="content">      <div class="contMask"></div>      <div class="text">          情形一:如果系统中没有开放簇,  <br /><br /><br /><br /><br /><br />        情形二:如果系统中还有开放簇,则向所有开放簇的簇首节点转发pi申请加入系统消息;簇首节点在收到该消息后,直接向pi返回簇中所有的开放节点;假设pi所收集到的开放节点集合为A,pi根据预先定义的某种父节点选取原则从A中挑选一父节点,若      </div>  </div>  </body>

原理说明:

做一个绝对定位空的div,并给它设置一个半透明渐变的png格式的图片,让其定位在文字div的底部。这样就可以达到文字渐变的效果了。

注意:

png图片在ie6中不会自动半透明,要使用filter做一下处理。

本文为作者原创,转载请注明出处。
http://www.cnblogs.com/weirhp/archive/2011/08/08/2130478.html

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2