使用css的大背景图像

Question

如何使用CSS加载图像以覆盖整个背景,如某些网站.不是通常的背景图像属性,但我想快速加载图像.

例子:

http://www.marinayachting.it/

http://alexandraowen.co.nz/

Answer 1

我是制作marinayachting的人.

基本上,对于大(和缩放)背景有三种方式:使用css background-image,拉伸<img />定位的标签:固定或使用两种方式.

最好的方法是使用background-image新的酷background-size属性的CSS .我认为Firefox(自3.6以来),Safari,Chrome和Opera都支持它(目前有供应商前缀).坏人是(猜!)Internet Explorer.因此,诀窍是通过javascript定位IE和Firefox <3.6并<img />在文档onready事件中注入streched 标记.

为了使事情变得快速,导出不大于1024px的图像(在某种图像上,甚至更小的分​​辨率也能很好地工作)并且尺寸不超过100kb.当然,快速服务器甚至更好的CDN都会有所帮助.

请注意,版本8之前的IE以非常丑陋的方式呈现拉伸图像(线性缩放)并且是低调的!使用专有的供应商css -ms-interpolation-mode:bicubic;会有所帮助,但也会让那个糟糕的浏览器更慢.为了获得最佳质量和性能,您可以使用AlphaImageLoader过滤器.是的,用于解决旧IE6中的png透明度问题.例如.marinayachting.it画廊部分的背景和动画旋转木马都装有AlphaImageLoader过滤器.特别是旋转木马,使用通过javascript动画的轻微拉伸pngs,运行速度为0.5fps,没有滤镜!

Answer 2

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,则页面滚动时图像将保持静止.

这没有什么神奇之处.至于快速加载它我不认为如果不重复你可以做很多事情.如果它重复,那么请确保您的图像是一个模块的大小.根据内容,这可以是一个像素高或一个像素.

Answer 3

快速加载背景图像没有任何魔力,你只需:

• 有一个快速的服务器.
• 尽可能压缩图像.
• 使您的页面HTML变小,以便其余的可以尽快开始加载.
• 没有许多其他图像也必须加载.
• 没有很多脚本和其他必须加载的外部文件.