HTML/CSS Div 和背景图像答案

【问题标题】：HTML/CSS Div and Background ImageHTML/CSS Div 和背景图像
【发布时间】：2013-03-13 17:06:39
【问题描述】：

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

这是我想出的解决方案。（我把它放在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 标签的情况下这样做？它干扰了我的其余布局。

【问题讨论】：

你可以将body背景设置为background/001.jpg而不是div背景，并使用css3设置background-size:cover
确实有效，但不如我以前的有效。当您使用窗口大小时，它不会随之变形。

标签： css image html background

【解决方案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');
}

【讨论】：

progid:DXImageTransform.Microsoft.AlphaImageLoader 过滤器应该为 IE 的 preIE9 版本解决这个问题，但老实说，我没有可用于测试的 IE8 机器（这是我在旧的客户端站点和 IIRC 它确实在 IE8 上工作）
感谢编辑马特 - 很好的收获（当我在布局时一定把它搞砸了）

【解决方案2】：

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

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

【讨论】：

这不起作用。它使图像成为背景，但不适合浏览器。我添加了覆盖和不重复的选项，但它的效果不如我之前的效果。当您使用窗口大小时......它不会随它变形。