Question

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

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

.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标记，我有没有这样做？它干扰了我的其余布局。

Answer 1

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

background-image: url(background/001.JPG)

Answer 2

这应该适用于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');
}

HTML / CSS Div和背景图像

2 个答案: