8

CSS3 の「Background-Size」プロパティを使用してから、Modernizr のようなものを使用して、古いブラウザで確実にサポートされるようにする方法はありますか (特に、「background-size: cover」オプションを使用したい)。

Modernizr Web サイトで言及されている cssFx を調べましたが、これは、IE8 などのブラウザーが背景サイズ プロパティをサポートできるようにするのではなく、プロパティを使用する必要があるブラウザーのベンダー プレフィックスを追加するだけのようです。

CSS3Pie も調べましたが、現在 background-size プロパティをサポートしていないようです。

[2011/10/11 - 古いブラウザで IE7/8 を中心に考えているが、理想的には FF3.6 などをカバーしたい]

4

6 に答える 6

10

background-size多くの古いブラウザではサポートされていません。

これに対する一般的な解決策は、背景にしたい要素の後ろに配置された追加<div>の要素または要素を使用してシミュレートすることです。<img>

これは、追加のマークアップを使用するだけで実現できますが、このソリューションには、プロパティの代わりにすべてのブラウザーで使用することになるという欠点がありbackground-sizeます。つまり、古いブラウザのためにコードを故意に劣化させることを意味し、これは理想的ではありません。

CSS プロパティをサポートするブラウザで使用する場合は、Javascript を少し使用して上記のマークアップを生成できますが、必要な場合のみです。これは、最新のブラウザーが問題なく を使用できbackground-size、古いブラウザーのみがフォールバックを使用することを意味します。

これに対する Javascript ソリューションが Web 上で利用可能です (簡単な Google 検索で次のものが見つかりました: http://css-tricks.com/766-how-to-resizeable-background-image/など)。重要なのは、ブラウザに基づいてトリガーする方法を知る必要があることです。

これがModernizrの出番です。質問でModernizrについて行った説明は完全に正確ではありません。HTML マークアップに一連の CSS クラスを生成し、すべてのブラウザー機能を表す Javascript に対応する変数を生成します。これらは、現在のブラウザがサポートしているかどうかを示すブール フラグです。

そのため、Modernizr を使用すると、ブラウザがサポートしているかどうかを Javascript で確認し、サポートしbackground-sizeていない場合にのみ代替の JavaScript 関数を実行できます。

if(!Modernizr.backgroundsize) {
    //do stuff here to simulate the background-size property for older browsers.
}

それが役立つことを願っています。

于 2011-10-11T08:39:36.060 に答える
3

background-size とそのプロパティのサポートについては、http: //www.standardista.com/css3/css3-background-propertiesで確認できます。

この CSS は、IE9 以降、FireFox 3.6 以降、Safari、Chrome をサポートしています。

background-size: cover;
-moz-background-size: cover;

IE7/8 のサポートについては、caniuse.comに次のポリフィルがリストされています: https://github.com/louisremi/background-size-polyfill

于 2013-10-18T17:23:54.663 に答える
1

まず、Firefox 3.6 の簡単な修正方法があります。ベンダー プレフィックスがあります。

-moz-background-size

メディア クエリを使用する場合の解決策について: ユーザーが古いブラウザーを表示しているときに、Modernizr を使用して別の画像をターゲットにすることができます。これは、別のブラウザー リクエストを意味します。ただし、おそらく、画面サイズが小さくなるクエリごとに小さい画像を読み込むことになります。Modernizr は、これらのリクエストが新しいブラウザーで無視される状況を作り出すため、新しいブラウザーを使用する大多数の人々のサーバー リクエストを削減します。

好奇心から、上記の解決策を試してみましたが、うまくいきました。次の modernizr クラスを次のように適用しました: .no-backgroundsizefor non background-size support ie を新しいイメージにロードしました。他のすべてのブラウザーでは、クラスを追加し、.backgroundsizeFF の上部にプレフィックスの言及を含めました。これは、.no-background の新しい画像を使用してメディア クエリごとに繰り返すことができます。これは、問題を解決する 1 つの方法です。

-12/15/12 に試した後、この投稿を編集しました。

于 2012-12-15T03:10:32.267 に答える
0

おそらく、modernizrを使用して、プロパティが現在のブラウザでサポートされているかどうかを確認することをお勧めします。そうでない場合は、background-sizeプロパティを必要とせずに、見栄えのするサイト/アプリケーションの代替表示を見つけてください。

もちろん、画像を含む基になるdiv（サイズを変更できます）やこのdivと重複するコンテンツなど、このプロパティをまったく含まない別のアプローチを試すこともできます。幸運を。

于 2011-10-10T16:27:00.467 に答える
0

より適切にサポートするための最適なサンプル:

  background-image: url(bg-image.png);

      -webkit-background-size: 100% 100%;           /* Safari 3.0 - Old Chrome - Old Android */
         -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
              background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

新しいFirefoxバージョンで問題が発生したため、これを追加しないでください: 

-moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5)

出典: mozilla.org

于 2016-12-01T16:46:26.890 に答える
0

別のオプションはBackground Size Polyfillです。

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}
于 2015-02-05T17:28:38.867 に答える