作为背景的舒展图象

Question

我需要图像拉伸作为页面的背景.如果页面不能很好地缩放,屏幕分辨率可能是什么,整个图像必须在屏幕上可见,这无关紧要.我在Google上找到了一些解决方案,但要么在Firefox2或IE6中都不起作用,要么两者兼而有之,我也需要这两个解决方案.我讨厌人们不升级他们的软件,但我仍然看到这些浏览器在谷歌分析数据中击中网页,尤其是IE6.

这有很好的跨浏览器解决方案吗？

Answer 1

你可以使用一个很好的老式img标签,没有高度和宽度属性.在CSS中,使用低z-index绝对定位,将高度和宽度设置为"100%".

将页面上的其他内容放在另一个具有更高z-index的div中

像这样:

<style type="text/css">
#stretchy {
    postion: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#everything_else {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>

...

<img src="/images/myimage.jpg" id="stretchy" />

<div id="everything_else">
    ...
</div>

有关示例,请参见http://axoplasm.com/lost.html.

它不完全是一个"背景图像"(可能不符合符合W3C标准的CSS),但它确实有效.