css實現【文章未完末尾處的文字顏色變淡效果】相容常用瀏覽器

來源:互聯網
上載者:User

又好久沒有寫部落格了,也不知道應該寫點啥,不知道什麼東西值得與大家分享。

前些天看這個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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.