我正在使用以下 css 来获得线性渐变效果，但它在 mozilla firefox 中不起作用，你们中的任何人都知道它请帮助在 firefox 中获得相同的效果。
CSS是
background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.65) 0,transparent);
问问题
479 次
4 回答
1
我总是将这个编辑器用于渐变。一个不错的带有 css 代码输出的渐变可视化编辑器。创建的代码支持所有主流浏览器，并为旧版 Internet Explorer 提供后备方案。
于 2013-11-11T10:39:03.473 回答
1
使用 -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 的 Prefix free。
在渐变的特定情况下，您可以使用这个出色的渐变生成器为您添加前缀。
于 2013-11-11T10:39:31.413 回答
1
-moz-linear-gradient(center top, #000, #fff);
这就是格式。
于 2013-11-11T10:39:55.413 回答
0
首先，当使用任何带有前缀的 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，它提供了有关历史浏览器对大量浏览器功能的支持的确切详细信息。
希望有帮助。
于 2013-11-11T10:59:46.300 回答