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中渲染得很好，但罗盘任务因此错误而烦恼：

无法确定相反的位置：到

思考？你如何做一个跨浏览器scss线性渐变？

Answer 1

请安装指南针版本~1.0.0

要检查当前使用的指南针版本，请键入：

$ compass version

我通过卸载当前版本并安装最新版本来更新指南针。

$ gem uninstall compass $ gem install compass

或

如果您不想更新，可以在没有渐变方向的情况下使用它。

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

线性渐变Firefox支持

1 个答案: