3

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 では正常にレンダリングされますが、コンパス タスクは次のエラーで叫びます:

反対の位置を決定できません: to

考え？クロスブラウザの scss 線形グラデーションをどのように行うのですか?

4

1 に答える 1

1

コンパスのバージョン ~1.0.0 をインストールしてください

使用しているコンパスの現在のバージョンを確認するには、次のように入力します。

$ compass version

現在のバージョンをアンインストールして最新バージョンをインストールすることで、コンパスを更新しました。

$ gem uninstall compass $ gem install compass

また

更新したくない場合は、グラデーションの方向なしで簡単に使用できます。

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

于 2014-08-21T15:10:29.977 に答える