次のCSSを使用して線形グラデーション効果を取得していますが、mozilla firefoxでは機能しません。Firefoxでも同じ効果を得るのに役立つことを知っている人はいますか.
CSSは
background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.65) 0,transparent);
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 に答える
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 に答える