1

フロントページにカスタムCSSを挿入できるWebアプリケーションに取り組んでいます。

スタートページにフルスクリーンの背景画像を表示したい。すべての最新バージョンのブラウザーでサポートされているbackground-size:coverを使用できることを理解しています。

                body {
                    background-image:url(/File/Publisher/Start/startpage_background.jpg);
                    background-repeat:no-repeat;
                    background-size:cover;
                }

これは、Firefox および Chrome の最新バージョンで機能します。ただし、IE11では機能しません。背景画像は画面全体を覆うように縮小されません。元のサイズで表示され、部分的にトリミングされています。

F12 を使用してデバッグすると、margin-top または margin-bottom (スクリーンショットを参照) を無効にすると、background-size プロパティが機能することがわかりました。

ここに画像の説明を入力

Web アプリケーションの元の CSS によって導入された margin プロパティを変更したくありません。この問題を解決する方法はありますか?

4

1 に答える 1

2

私もこれに遭遇しbody、高さを指定すると、パーセンテージで設定されていない限り、カバー プロパティが有効になることがわかりました。適切な順序で行うには、次のmin-height: 100vhことを行う必要があります。

http://codepen.io/anon/pen/oXmzLL?editors=010

他のブラウザでは問題がないのでかなり奇妙ですが、それは IE です。もちろん、コンテンツがウィンドウ サイズを超えない場合にのみ表示されます (編集 - ドキュメント フローから外れるような配置もすべきではありません)。

ちなみに、最速の答えではありませんが、この件に関して私が遭遇した唯一のトピックです（それはレガシーブラウザのサポートに関するものではありませんでした）...

于 2015-08-05T05:21:52.947 に答える