web - Web ページで大きな背景画像をシームレスに使用する

Question

サイトに巨大な背景画像を配置したいのですが、ユーザーがそれらをダウンロードするのに苦労したり、背景が読み込まれるとサイトが醜くなったりすることはありません。

サイズは 1920 X 1080 以下ですが、キロバイト/メガバイトで表すのは困難です。

ここでの私のオプションは何ですか?また、どれが最も効果的ですか?

私は帯域幅についてあまり気にしていません。ユーザーにすべてが見栄えが良いと思ってもらいたいだけです ;)

score 2 · Accepted Answer

1つのオプションは、複数の背景を使用することです。最下層として小さな背景を持ち、大きな背景で覆います。

ボディに2つの背景が必要で、 IEをサポートしたい場合は、2つの背景を持つのは難しいかもしれません。解決策は、小さいボディの背景を開始し、JSを使用して、ロードされたら低解像度の背景を高解像度に変更することです。

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

このような大きな背景には、一部のモバイルブラウザよりも多くのRAMが必要であることに注意してください（3GSより前のiPhoneは、このような画像のデコードをまったく拒否するか、パニック状態でキャッシュ/タブコンテンツのパージを開始します）。

後者の問題は、CSSメディアクエリで回避できます。

max-device-width（仮想/ズーム）の代わりにクエリを除くmax-width。

1 に答える 1