CSS 实现图片透明度渐变效果

html-css025

CSS 实现图片透明度渐变效果,第1张

实现图片的透明度渐变效果,效果如下:

先说下我的实现,并没有用什么黑科技,而是通过两层图层堆叠的方式来做的。下面一层就是单纯的 svg 图片,上面覆盖了一层遮罩,并设置遮罩的背景色为蓝色到透明色的从左到右渐变。这样,看上去就是一个图片从右到左渐渐变得透明的效果。

这是我比较粗暴的方法,后来在网上看到一种更加优雅的方式:

大体上差不多,重点是 CSS 的 background-image 属性可以设置多张图片,用逗号隔开 。因为我不知道这个属性有这个能力才会额外加了个渐变透明图层来实现效果。

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型渐变.