线性渐变火狐浏览器支持

Question

当我在ColorZilla上制作一条线性渐变时，我会获取以下类似于scss的代码：

@include background-image(linear-gradient(top,  #659adc 0%,#004ca2 100%));

生成以下CSS：

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #659adc), color-stop(100%, #004ca2));
background-image: -webkit-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #659adc), to(#004ca2));
background-image: linear-gradient(top, #659adc 0%, #004ca2 100%);

而且这些都不能在Firefox中使用。所以我进行了一些调整，并添加了我知道在Firefox中有效的内容：

@include background-image(linear-gradient(to bottom,  #659adc 0%,#004ca2 100%)); //notice the 'to bottom'

现在这是生成的 CSS：

background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #659adc), color-stop(100%, #004ca2));
background-image: -webkit-linear-gradient(to bottom, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(to bottom, #659adc 0%, #004ca2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#659adc), to(#004ca2));
background-image: -webkit-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: -o-linear-gradient(top, #659adc 0%, #004ca2 100%);
background-image: linear-gradient(to bottom, #659adc 0%, #004ca2 100%);

在Firefox中可以正常显示，但compass任务会出现以下错误：

无法确定“to”的相反位置。

有什么想法吗？如何实现跨浏览器的scss线性渐变？

- Daniel Birowsky Popeski

---

你有最新版本的Compass吗？ - cimmanon

@cimmanon，它是0.12.3。 - Daniel Birowsky Popeski

那不是最新的版本。你需要1.0版本。 - cimmanon

这并不回答你的问题，但值得注意的是，仅使用background-image: linear-gradient(#659adc, #004ca2)就可以正常工作，因为渐变默认从上到下。 - Josiah

@cimmanon，它有效，将其作为答案。 - Daniel Birowsky Popeski

Answer 1

请安装compass版本 ~1.0.0

要检查当前使用的compass版本，请输入： $ compass version

我通过卸载当前版本并安装最新版本来更新我的compass。 $ gem uninstall compass $ gem install compass 或者 如果您不想更新，可以简单地使用没有渐变方向的背景图片。

background-image: linear-gradient(#659adc, #004ca2)

- Adrian Enriquez