如何拉伸背景图像以适应网页

为您的网站带来背景图形的视觉兴趣

图像是有吸引力的网站设计的重要组成部分。这包括使用背景图像。这些是在页面区域后面使用的图像和图形，而不是作为内容页面的一部分呈现的图像。这些背景图片可以增加页面的视觉兴趣，并帮助您实现您可能在页面上寻找的视觉设计。

如果您开始使用背景图片，则无疑会遇到想要图片展开以适应页面的场景。

这种伸展背景图像的愿望是网页设计师非常普遍的愿望，因为不是每个图像都适合网站的空间。不用设置固定大小，无论浏览器窗口有多宽或很窄，拉伸图像都可以弯曲以适应页面。

拉伸图像以适应页面背景的最佳方式是使用CSS3属性作为背景大小。这是一个使用背景图片作为页面主体的示例，它将大小设置为100％，以便它始终伸展以适合屏幕。

身体 {
背景：url（bgimage.jpg）不重复;
背景大小：100％;
}

据caniuse.com称，该属性适用于IE 9+，Firefox 4+，Opera 10.5+，Safari 5+，Chrome 10.5+以及所有主流移动浏览器。这涵盖了今天可用的所有现代浏览器，这意味着您应该使用此属性，而不必担心它不会在某个人的屏幕上工作。

您不太可能需要支持比IE9更早的浏览器，但我们假设您担心IE8不支持此属性。在这种情况下，您可以伪造延伸的背景。您可以使用Firefox 3.6（-moz-background-size）和Opera 10.0（-o-background-size）的浏览器前缀。

伪造延伸背景图像的最简单方法是在整个页面上展开。然后，你不会因为额外的空间，或者不必担心你的文本适合在拉伸区域。以下是如何做到这一点：

id =“bg”/>

首先，确保所有浏览器在HTML和BODY元素上都有100％的高度，0边距和0填充。将以下内容放在HTML文档的头部：
将您想要成为背景的图像添加为网页的第一个元素，并为其指定“bg”的ID ：
定位背景图像，使其固定在顶部和左侧，宽100％，高100％。将其添加到您的样式表中：
img＃bg {
位置：固定;
top：0;
左：0;
宽度：100％;
身高：100％;
}
将所有内容添加到ID为“content”的DIV元素内的页面。在图像下方添加DIV：
您的所有内容 - 包括标题，段落等

注意：现在查看您的页面很有趣。图片应该展示出来，但是您的内容完全缺失。为什么？由于背景图像高度为100％，并且内容分区位于文档流中的图像之后 - 大多数浏览器都不会显示它。
放置您的内容以使其相对并且z索引为1.这将使其在符合标准的浏览器中位于背景图像上方。将其添加到您的样式表中：
#content {
位置：相对;
z-index：1;
}

但是你没有完成。 Internet Explorer 6不符合标准，仍然存在一些问题。除了IE6之外，还有很多方法可以隐藏每个浏览器的CSS，但最简单（也是最不可能导致其他问题）的方法是使用条件注释。将以下样式表放在文档头部：
在突出显示的评论中，添加另一种样式表以获得更好的IE 6播放效果：
请务必在IE 7和IE 8中进行测试。您可能还需要调整注释以支持它们。但是，当我测试它时，它就起作用了。

好的 - 这是无可厚非的。很少有网站需要支持IE 7或8，远不止IE6！

因此，这种方法过时了，可能对您不必要。我把它放在这里更多的是作为一种好奇心的模式，以至于在我们所有的浏览器一起玩得很好之前，还有多少困难！

您可以使用类似的技术在网页上的DIV或其他元素上伪造延伸的背景图像。这有点棘手，因为您必须使用绝对定位或对页面的其他部分有奇怪的间距问题。

将图像放在我想用作背景的页面上。
在样式表中，为图像设置宽度和高度。请注意，您可以使用百分比来表示宽度或高度，但我发现使用长度值调整高度更容易。
img＃bg {
宽度：20em;
身高：30em;
}
像上面所做的那样，将您的内容放在ID为“content”的div中：
你在这里的所有内容
将内容div设置为与背景图像相同的宽度和高度：
div＃content {
宽度：20em;
身高：30em;
}
然后将内容放置到与图像相同的高度。所以如果你的图像是30em，你会有一个顶部样式：-30em; 不要忘记将内容的z索引设置为1。
#content {
位置：相对;
顶部：-30em;
z-index：1;
宽度：20em;
身高：30em;
}
然后为IE 6用户添加-1的z-index，如上所示：

再次，随着背景尺寸享受现在广泛的浏览器支持，这种方法也很可能不必要，并作为过去时代的产品呈现。如果您确实想要使用这种方法，只需确保在尽可能多的浏览器中进行测试即可。

如果您的内容更改大小，则需要更改容器和背景图片的大小，否则最终会出现奇怪的结果。

Alike posts