根据an Adobe forum thread,从AIR 3.0开始支持径向渐变,但body{}
中的以下两行CSS都显示为全白:
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));
background: -webkit-radial-gradient(center, ellipse cover, #088fe0 0%, #001193 50%, #00025f 100%);
我我能够成功使用线性渐变:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #088fe0), color-stop(100%, #00025f));
这里出了什么问题?
运行Windows 7旗舰版SP1 x64,使用adl
时使用AIR v3.6.0.6090,运行编译版本时使用v3.8.0.1430。
答案 0 :(得分:2)
为了更好地理解,我创建了fiddle
,请参阅详细信息
只有第一个无法在Chrome浏览器中运行..
其他两个工作正常。
请提供有关浏览器规范问题的更多详细信息。
编辑:根据要求进行更新
我已更新fiddle
现在正常工作,
第一个渐变过滤器无法正常工作,因为您必须记住它不适用于%size和
你也不能在暗示的PX中指定大小;如果你在px中指定使得如果不工作。
我有更新,这在Chrome中运行良好(-webkit浏览器。)也应该与AIR一起使用。
background: -webkit-gradient(radial, center center, 0, center center, 100, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));
答案 1 :(得分:-1)
设置后备颜色并使用background-image查看webkit的版本是否不支持渐变:
body {
background: red; /* fallback */
background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));
background-image: -webkit-radial-gradient(center, ellipse cover, #088fe0 0, #001193 50%, #00025f 100%);
}
答案 2 :(得分:-1)
如上所述,只有第一个版本在最新的Chrome版本中不起作用(适用于旧版本)。
为了在浏览器之间实现最大兼容性,您可能希望在此处包含一些声明
不支持渐变的旧浏览器,默认为平面颜色:
background: #088fe0;
火狐:
background: -moz-radial-gradient(center, ellipse cover, #088fe0 0%, #001193 50%, #00025f 100%);
旧版Chrome& Safari版本(均使用WebKit引擎):
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#088fe0), color-stop(50%,#001193), color-stop(100%,#00025f));
较新的Chrome& Safari版本(可能还有Opera 15 +):
background: -webkit-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);
旧版(pre-webkit)Opera:
background: -o-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);
IE 10:
background: -ms-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);
较旧的IE(我认为,直接过滤器中只有线性渐变):
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#088fe0', endColorstr='#00025f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
应该使用哪些浏览器(标准版):
background: radial-gradient(ellipse at center, #088fe0 0%,#001193 50%,#00025f 100%);
如果你把所有这些选项放进去,你应该在他们被支持的任何地方获得渐变。