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

发布网友发布时间：2022-04-26 22:31

共5个回答

热心网友时间：2022-04-06 12:06

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

热心网友时间：2022-04-06 13:24

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

所以你还是用PS把效果直接做在图片上保险

热心网友时间：2022-04-06 14:58

css逐渐暂时只支持IE 建议不要多用

热心网友时间：2022-04-06 16:50

渐变IE里面可以用插件，FF里面，我用的是JS，现在为了兼容性，我都是用JS了

热心网友时间：2022-04-06 18:58

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