当我在 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 任务会出现此错误:
Cannot determine the opposite position of: to
想法?你是怎么做跨浏览器 scss 线性渐变的?
最佳答案
请安装 compass 版本~1.0.0
要检查您使用的 compass 的当前版本,请键入:
$ compass 版
我通过卸载当前版本并安装最新版本来更新我的 compass 。
$ gem 卸载 compass
$ gem 安装 compass
或
如果你不想更新你可以简单地使用它没有梯度方向。
背景图像:线性渐变(#659adc,#004ca2)
关于css - 线性渐变 Firefox 支持,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22454359/