在图片上面盖个层，写个线性渐变
.mask{height:100%
background: -webkit-linear-gradient(transparent, #fff)
background: -o-linear-gradient(transparent, #fff)
background: -moz-linear-gradient(transparent, #fff)
background: linear-gradient(transparent, #fff)
}
渐变的更多用法可以直接搜css linear-gradient
filter : progid:DXImageTransform.Microsoft.Barn ( enabled=bEnabled , duration=fDuration , motion=sMotion , orientation=sOrientation )Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Barn ( sProperties ) "
属性 | 特性(Attributes | Properties)方法(Methods)motion Motion 设置或检索对象的新内容是先从外显示还是先从内显示。
orientation Orientation 设置或检索滤镜效果模拟的开关门是横向的还是纵向的。
enabled Enabled 设置或检索滤镜是否激活。
duration Duration 设置或检索转换完成所用的时间。
Percent 设置或检索当前静态滤镜输出在转换进程中所处的点。
status 检索转换的当前状态。
<style>div {
box-sizing:border-box
width:400px
height:240px
font-size:22px
padding-top:100px
overflow:hidden
background:no-repeat center top / 100% 100%
background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)), url(背景图片路径写在这)
}
</style>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
