4

レスポンシブ デザインを作成しているので、デスクトップとモバイル デバイスの両方で Web サイトが適切に表示されます。私のウェブサイトでは、div の 1 つにかなり大きな背景画像があります。

今私が疑問に思っているのは、メディアクエリで色に置き換えられた場合、div の背景画像が読み込まれるかどうかです。

例：

div {
    background: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {

    div {
        background: #000;
    }
}
4

2 に答える 2

6

いいえ、プロパティを完全にオーバーライドしているため、そうではありませんbackground*。

ただし、参考までに、プロパティを使用するのではなく、画像を保持して色をbackground追加したい場合は、個人background-imageとbackground-colorプロパティを使用してください。

div {
    background-image: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {
    div {
        background-color: #000;
    }
}

* これはブラウザ固有であることに注意してください。時間を節約するために、ほとんどのブラウザーは必要なときにのみリソースをロードします。関連項目:未使用の CSS イメージはダウンロードされますか?

于 2013-10-29T14:22:24.253 に答える
2

画像が CSS にある限り、画像はブラウザによって読み込まれます。Chrome Debugger Tool > Network を使用して確認できます。

レスポンシブ デザインでの画像の読み込みとパフォーマンスに関する興味深い記事があります。

http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/

于 2013-10-29T14:24:28.333 に答える