如何在 Mozilla Firefox 上获得线性渐变效果答案

【问题标题】：How to get Linear gradient effect on mozilla firefox如何在 Mozilla Firefox 上获得线性渐变效果
【发布时间】：2013-11-23 03:02:42
【问题描述】：

我正在使用以下 css 来获得线性渐变效果，但它在 mozilla firefox 中不起作用，你们中的任何人都知道它请帮助在 firefox 中获得相同的效果。

CSS是

background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.65) 0,transparent);

【问题讨论】：

-webkit- 表示它是针对 webkit 浏览器的。（至少以前是这样的。现在似乎发生了变化。）
@Sirko:-webkit-（和其他类似前缀）实际上意味着它是一个实验性功能，已添加到 Webkit 引擎但尚未标准化。事实上，渐变已经现在已经标准化了，新的浏览器不需要前缀，所以在大多数情况下你应该可以去掉这个特性的前缀，除非你需要支持旧的浏览器版本.
@Spudley 我很清楚你提到的所有内容。但关键事实是，这些实验性功能（大多数情况下）仅限于一个特定的引擎。结果，它们在任何其他引擎上都失败了，就像操作代码一样。如果完全支持该功能，那么引擎很可能会使用无前缀版本或使用自己的前缀。
@Sirko：如果你知道这一切就够了。 :) 你放在括号里的那一点似乎暗示你不确定。
@Spudley 括号中的注释应该负责讨论，以便在其他浏览器中使用该前缀实现-webit- 功能。我实际上不知道，如果这被推动了。

标签： css firefox

【解决方案1】：

首先，当使用 any 带有前缀的 CSS 功能（如 -webkit-）时，您应该始终也指定相同的功能，但不带前缀。

前缀表示它是（或曾经是）特定浏览器支持的实验性功能，但可能仍在开发中或尚未标准化。

当一项功能标准化后，较新版本的浏览器将删除前缀，这就是为什么您也应该始终使用无前缀版本的样式。

在渐变的情况下，语法已经标准化了一段时间，因此对于几乎所有主要浏览器的当前版本，您可以在没有前缀的情况下使用它，如下所示：

background: linear-gradient(to top, rgba(0, 0, 0, .65) 0, transparent);

这在所有主要浏览器的最新版本中应该可以正常工作，包括 Firefox 和 Chrome。

所以如果你只想支持当前的浏览器版本，你甚至根本不需要-webkit- 前缀。

但是，这并不总是现实的，因为您可能需要支持某些浏览器的旧版本。

在这种情况下，了解哪些浏览器版本需要前缀会有所帮助，以帮助您决定是否通过提供样式的前缀版本来支持它们（因为如果您全部支持它们，则在 CSS 中可能会出现大量重复带有所有这些前缀的代码）。

因此，例如，许多 Safari 用户可能没有使用最新版本，这意味着他们将需要 -webkit- 前缀。或者您可能想要支持仍然需要它的 Android 设备。

但好消息是 Firefox 已经很长时间不需要此功能的前缀了，因此您可以放心地删除 -moz- 前缀。

CanIUse.com 是了解这类事情的好地方，它提供了有关历史浏览器对大量浏览器功能的支持的确切详细信息。

希望对您有所帮助。

【讨论】：

【解决方案2】：

使用-moz-linear-gradient：

background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .65) 0,transparent);

与语法略有不同的 W3C 版本：

background-image: linear-gradient(to top, rgba(0, 0, 0, .65) 0, transparent);

您应该始终在 W3C 前缀之前使用供应商特定的前缀（-o、-moz 等）。为防止自己编写它们，您可以使用编译时前缀，如Nettus+ Prefixr，或实时前缀，比如Lea Verou's Prefix free。

在渐变的特定情况下，您可以使用为您添加前缀的 Gradient Generator。

【讨论】：

自 Firefox 15 起，渐变不再需要 -moz- 前缀。您不需要它。
当然可以，但是他必须更改代码（to top 而不是bottom）。使用它当前的代码，它只适用于 -moz- 前缀：jsfiddle.net/afG4V/1 使用前缀或生成器为每个浏览器提供正确的代码，他也应该支持以前的版本。我不是建议只使用 -moz- 前缀，但感谢指出，可能我不够清楚，我现在将其编辑。
很公平，但您不应该为此功能使用 -moz- 前缀。一旦某个功能标准化，浏览器就应该放弃对旧前缀版本的支持，所以如果你使用了-moz- 版本，它将在未来版本的 Firefox 中停止工作，因为他们放弃了对它的支持。现在最好只使用标准语法，因为它已经存在了。
Spudley，我发现这绝对不是很清楚：由于匆忙写作，我忘记了“在 W3C 之前”部分，这在写答案时肯定是有意的。我总是只使用 W3C 声明，让 PrefixFree 动态地为它们添加前缀。再次感谢您指出。

【解决方案3】：

-moz-linear-gradient(center top, #000, #fff);

就是这样的格式。

【讨论】：

【解决方案4】：

我总是使用this 编辑器进行渐变。一个不错的带有 css 代码输出的渐变可视化编辑器。创建的代码支持所有主流浏览器，并为旧版 Internet Explorer 提供备用。

【讨论】：