css - 如何使背景图像适合整个页面而不重复使用纯 css？

Question

我有一张尺寸为 1024 x 724 的 JPG 图片。我的页面尺寸不是固定的。我的要求是:如果我调整页面大小，那么背景图像也应该调整大小并适合页面。

我也不想在我的 Html 页面/JSP 中保留图像相关信息。我想使用纯 CSS 来做到这一点。我没有使用 CSS3。因为有一个叫做background-size的属性可以让图片拉伸(stretch)到页面的宽度和高度。目前只有谷歌浏览器支持。有什么帮助吗？

Answer 1

您不能使用 CSS2 调整背景图片的大小。

您可以做的是拥有一个可以调整大小的容器:

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>

这样，div 将位于页面后面并占据整个空间，同时根据需要调整大小。里面的 img 会自动调整大小以适应 div。