css如何实现图片的透明渐变?

html-css09

css如何实现图片的透明渐变?,第1张

css问题filter: alpha(opacity=100,finishopacity=0,style=2)

alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,

style,startX,startY,finishX,finishY).

opacity代表透明度数,选值0-100,0是完全透明,100是不透明.

finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.

<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>