web - 在网页上无缝使用大背景图片

Question

我想在我的网站上拥有巨大的背景图片，但又不会让用户很难下载它们，并且网站在背景加载时看起来很丑。

它们的大小不会超过 1920 X 1080，但是很难说以千字节/兆字节为单位。

我在这里有哪些选择，哪些是最有效的？

我不太在意带宽，只是想让用户认为一切看起来都不错；）

score 2 · Accepted Answer

一种选择是使用多个背景。将小背景作为底层并用较大的背景覆盖它。

如果你想要它在 body 上并且想要支持 IE，那么拥有两个背景可能会很棘手。解决方案可能是启动较小的主体背景，一旦加载，使用 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而不是 (virtual/zoomed) max-width。

1 回答 1