zoukankan      html  css  js  c++  java
  • css实现【文章未完末尾处的文字颜色变淡效果】兼容常用浏览器 与您分享我的快乐

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

    前些天看这个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

  • 相关阅读:
    Python 操控Mysql
    mysql5.7 root密码重置
    pandas合并两个excel到一个excel
    键盘控制
    激活浏览器窗口
    python的xlwings库读写excel操作总结
    python 读取Excel使用xlwing库
    CMDB(资产管理系统) day1
    Vue之简易的留言板功能
    vue之神奇的动态按钮
  • 原文地址:https://www.cnblogs.com/weirhp/p/2130478.html
Copyright © 2011-2022 走看看