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

Posted 2023-04-17

IE下有这样的CSS代码：
filter: alpha(opacity=90,finishopacity=0,style=1,startx=150,starty=0,finishx=0,finishy=0);

可以实现一张图片从右至左 透明度逐渐变为0的效果

请问，这句CSS在 Firefox和chrome等浏览器里如何实现？ 谢谢
我想要的是 从右至左 透明度逐渐变为0的效果，不是整个图片都半透明那种 @@

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型渐变. 参考技术A css2无法实现，IE独有滤镜，FF和Ch这些浏览器都解析不出来这个效果！
css3有加入新专门做渐变背景的参数可以实现，FF和Ch浏览器高点版本都显示，但IE的8.0以下的版本浏览器又不支持了!

所以你还是用PS把效果直接做在图片上保险 参考技术B css逐渐暂时只支持IE 建议不要多用 参考技术C 渐变IE里面可以用插件，FF里面，我用的是JS，现在为了兼容性，我都是用JS了本回答被提问者采纳 参考技术D IE：
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]

Firefox：
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]

Chrome和Safari：
opacity:sqlN
其中sqlN的值域为[0, 1]

对于Firefox来说，用opacity就能完成透明化设置了，所以上面的-moz-opacity参考一下。
还有请注意，上面的属性会将元素内的所有内容都透明化，包括文字与图片，所以如果想要背景半透明的话，目前推荐的方法是用PNG图片做背景。

参考资料：http://www.jb51.net/css/21992.html

求大神帮忙js图片渐变效果

<img src="img/1.jpg" width="100%" height="100%" />
怎么用js把1.jpg渐渐的改变为2.jpg

参考技术A 设置一个setTimeout， 然后修改路径追问

你好能具体点吗？
我对js不是很懂

追答window.onload=function()
     setTimeout(function(
        document.getElementsByTagName('img')[0].style.background='url("img/2.jpg")';
    )

     , 2000)
   

参考技术B