css实现内容渐变隐藏效果代码
.box{ height:500px; width:500px; position:relative;// 这个非常重要 } .mask { width: 100%; position: absolute; top: 0; height: 100%; background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff); background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff); background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff); background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff); }
html代码
<div class="box"> <div class="content"> 我是功夫码的示例文字,我是功夫码的示例文字 我是功夫码的示例文字我是功夫码的示例文字 我是功夫码的示例文字我是功夫码的示例文字 我是功夫码的示例文字我是功夫码的示例文字 我是功夫码的示例文字我是功夫码的示例文字 我是功夫码的示例文字 <div> /*遮罩层 */ <div class="mask"></div> </div>
本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。