如何使用CSS加载图片以覆盖整个背景,就像一些网站那样。不是通常的background-image属性,而是要快速加载图片。
如何使用CSS加载图片以覆盖整个背景,就像一些网站那样。不是通常的background-image属性,而是要快速加载图片。
background-image
是 CSS 中放置图像的唯一方法。如果您想让它非常大,请将其放在 body
元素或填充整个视口的容器 div
上。
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
如果你使用一个容器div
,可以设置position:fixed;top:0;left:0
,这样图片在页面滚动时会保持不动。
没有什么神奇的。如果它不重复,想要让它快速加载,我认为你没有太多可做的。如果它重复了,请确保你的图片大小与一个模块的大小相同。这可能只有一个像素高或者宽,具体取决于内容。
<img />
标签。它没有做任何特殊处理,图片大小是 119.08KB。 - Jason让背景图片快速加载并没有什么神奇的方法,你只需要:
您可以将样式设置为内联,以便图像可以开始下载,而无需等待任何CSS文件准备就绪。
除了页面上的HTML:
<body style="background-image: none; ">
如果你深入挖掘他们的脚本,你就可以看到他们做了什么。但我保证它根本不比只设置 background-image
属性更快。
body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}
这种方法也可以应用于div,祝好运。