html - 这个背景图像是如何工作的?

标签 html css static background background-image

所以这个网站:

http://www.atomicdust.com/

他们在每个页面上都有背景图片,但在缩放时,它不会改变 - 永远不会。更不用说加载速度有多快了。没有背景图像怎么可能进行内容缩放?我可以理解它是否是重复的图像,但事实并非如此。

最佳答案

在那个网站上,它看起来好像是由脚本完成的,正如@rownage 所观察到的,但我已经在现代浏览器中使用 (CSS3) “cover” 属性成功地完成了它,即 background-size: cover ; 根据我的笔记(欢迎评论!)this A List Apart article是我获取信息的来源。

在我的(仍在进行中!)照片网站上,它 looks like this眼下。在我试过的浏览器中放大时,背景大小保持不变。如果 Internet Explorer 无法处理它,我也不会感到惊讶。

至于如何快速加载该站点上的图像,技巧很简单,就是选择可压缩的图像,压缩得很好。 The background that loaded when I visited their site是 1024x680 像素,但因为它主要是黑色和白色,带有大面积的纯色,所以它压缩到非常小的 74KB。

关于html - 这个背景图像是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7420333/

相关文章:

java - 从静态方法实例化子类

html - 如何在表中创建三级行?

html - 谁可以给我解释一下这个? (HTML CSS)

javascript - 如何将动画 div 限制在网页部分?

jquery - 基于图像位置的视差效果

java - 这段代码示例中 static 有什么用?

html - CSS:使用边距/填充将 Div 拉伸(stretch)到其父级高度的 100%

javascript - AngularJS 自定义生成的指令动态属性绑定(bind)

css - 减少 Bootstrap 导航断点

Java Grect 和私有(private)静态错误