首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无缝地使用网页上的大背景图像

无缝地使用网页上的大背景图像
EN

Stack Overflow用户
提问于 2010-01-15 11:56:42
回答 1查看 424关注 0票数 0

我想在我的网站上有巨大的背景图片,但不让用户很难下载他们和网站看起来丑陋的背景负载。

它们的大小不会超过1920年的X 1080,但很难说是千字节/兆字节。

我在这里的选择是什么,哪些是最有效的?

我不太在意带宽,只是想让用户觉得一切看起来都很好;)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-01-15 12:26:38

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

这可能是棘手的有两个背景,如果你想在身体上,并希望支持IE。解决方案可能是启动较小的车身背景,使用JS在加载后将低分辨率背景更改为高分辨率背景:

代码语言:javascript
运行
复制
var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

请记住,这样大的背景比一些移动浏览器需要更多的内存(iPhones前3GS将拒绝解码这样的图像,或将开始清除缓存/标签内容的恐慌)。

后一个问题可以通过CSS Media查询来解决:

http://lofotenmoose.info/css/destroy/media-queries-background-stretch/

除了查询max-device-width,而不是(虚拟/缩放) max-width

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2071231

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档