0

我有一个非常大的图像。我想用这张图片作为我网站的背景。我还希望这张图片可以拉伸并适合不同的浏览器窗口大小。

这是我想出的解决方案。（我把它放在 jFiddle 上是为了让你们更容易阅读）。

http://jsfiddle.net/sGyax/

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;}

<body>
<div id="background">
    <img src="background/001.JPG" class="bg"/>
</div>
</body>

无论如何，我是否可以在我的 HTML 中不使用 IMG 标记来执行此操作？它干扰了我的其余布局。

4

2 回答 2

1

将其设置为背景图像（参见下面的示例）而不是具有巨大负 z-index 的图像，并考虑使用 CSS3 backgound-size属性来覆盖整个页面。

background-image: url(background/001.JPG)
于 2013-03-24T01:27:03.087 回答
1

这应该适用于 IE9/10 和当前的 Firefox、Opera 和 Chrome：

html{
    background: url(background/001.JPG) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
}
于 2013-03-24T01:31:44.090 回答