css3 隱藏文本
问题描述
請問一下假設文本很多
1111111111111111111122222222222222222222333333333333333333334444444444444444444455555555555555555555
是否可以讓他從第4以下 開始透明度從0到100漸層顯示?比如說我可以設定px高度 從height:200px開始就開始透明度
问题解答
回答1:不知道这样可否满足你的要求,内容上层用个元素(这里可以采用伪元素)来
<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;/*让遮罩层不遮挡内容,可以鼠标穿透点击下面的内容*//*背景色从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
相关文章:
1. docker内创建jenkins访问另一个容器下的服务器问题2. dockerfile - [docker build image失败- npm install]3. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题!4. java - mybatis怎么实现在数据库中有就修改,没有就添加5. java中关于直接插入排序遇到的问题。6. docker gitlab 如何git clone?7. node.js - mongoDB使用$gte的问题8. javascript - c#如何向js传值9. 我在centos容器里安装docker,也就是在容器里安装容器,报错了?10. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因?
