径向渐变显示为全白

Question

径向渐变显示为全白

3

根据Adobe论坛帖子，从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 Ultimate SP1 x64，使用 adl 时带有 AIR v3.6.0.6090，编译版本运行时则是 v3.8.0.1430。

- Danny Beckett

我尝试了前两个.. 第一个不起作用，但第二个可以。 - Josh Crozier

是的，我在Adobe AIR中尝试过它们。 - Josh Crozier

@JoshC 多奇怪啊！你和我运行的是同一个版本吗？air.trace(air.NativeApplication.nativeApplication.runtimeVersion); - Danny Beckett

@JoshC 我在升级到3.8版本后仍然无法显示渐变。 - Danny Beckett

@JoshC 仍在努力解决这个问题。我最初认为是因为我的应用程序描述符使用了命名空间2.0 (<application xmlns="http://ns.adobe.com/air/application/2.0">)，但将其更改为3.6并没有帮助。我还创建了一个空白应用程序，但仍然看到相同的行为。您有任何进一步调试的想法吗？ - Danny Beckett

3个回答

-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%);
}

- Kristijan

如果您看到红色，则表示您的Adobe Air版本的webkit版本不支持渐变，因此这将无法正常工作；如果您没有看到红色，则该错误可能出现在其他地方。 - Kristijan

-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（我认为只有直接X滤镜中可用的线性渐变）：

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%);

如果您将所有这些选项都放入其中，您应该能够在任何支持梯度的地方获得它们。

- karljacuncha

我认为你也错过了这一点，这不是针对浏览器的，而是针对Adobe AIR的。 - Danny Beckett

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MarmiK · Accepted Answer

我创建了一个 fiddle 以便更好地理解，请查看详细信息，

只有第一个在Chrome浏览器中不起作用..

其他两个都正常工作。

请提供有关您的浏览器规格的更多详细信息以解决问题。

编辑：根据要求更新

我已更新 fiddle，现在它可以正常工作，

第一个渐变滤镜不起作用是因为您必须记住它不适用于％大小和

还必须不要在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));