css3 隱藏文本
問題描述
請(qǐng)問一下假設(shè)文本很多
1111111111111111111122222222222222222222333333333333333333334444444444444444444455555555555555555555
是否可以讓他從第4以下 開始透明度從0到100漸層顯示?比如說我可以設(shè)定px高度 從height:200px開始就開始透明度
問題解答
回答1:不知道這樣可否滿足你的要求,內(nèi)容上層用個(gè)元素(這里可以采用偽元素)來
<style type='text/css'> p{position:relative;} p:after{content:’’;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;/*讓遮罩層不遮擋內(nèi)容,可以鼠標(biāo)穿透點(diǎn)擊下面的內(nèi)容*//*背景色從0~指定高度(這里100px)為純透明,從指定高度到100%為漸變至不透明*/background:linear-gradient( rgba(255,255,255,0) 100px, rgba(255,255,255,1) 100%); }</style><p> <p>1111111111111111111</p><p>2222222222222222222</p> <p>3333333333333333333</p><p>4444444444444444444</p> <p>5555555555555555555</p><p>6666666666666666666</p> <p>7777777777777777777</p><p>8888888888888888888</p> <p>9999999999999999999</p></p>
效果圖:
css3的background的漸變-webkit-linear-gradient
相關(guān)文章:
1. node.js - webpack-dev-server正常運(yùn)行,webpack打包卻出錯(cuò),怎么辦?2. mysql 5個(gè)left關(guān)鍵 然后再用搜索條件 幾千條數(shù)據(jù)就會(huì)卡,如何解決呢3. javascript - webpack編譯后的文件不生效,未編譯的文件生效4. java - ehcache緩存用的是虛擬機(jī)內(nèi)存么?5. 這是什么情況???6. thinkphp3 count()方法必須加上字段?7. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢,查詢結(jié)果有多條,如圖。我要forsearch里面echo8. 輸入地址報(bào)以下截圖錯(cuò)誤,怎么辦?9. android - 哪位大神知道java后臺(tái)的api接口的對(duì)象傳到前端后輸入日期報(bào)錯(cuò),是什么情況?求大神指點(diǎn)10. python中return 語句與 分支語句連用問題
