且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在顶部淡出图像

更新时间:2023-12-05 15:27:40

您可以使用具有白色到透明渐变的< div>

You could use a <div> with a white-to-transparent gradient:

HTML

<div class="line">
    <div class="fadeTop"></div>
    <div class="content">
        This is just a sample paragraph.
    </div>
</div>

CSS

.fadeTop{
    height:20px;width:100%;position:absolute;left:0; top:0;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

(我使用 gradient generator

检查: JSFiddle