可扩展的背景HTML CSS Javascript

StackOverflow https://stackoverflow.com/questions/2200391

题

任何人都不会知道的一个办法有一个背景象规模的尺寸的浏览器窗口是吗?我知道CSS3允许背景的宽度，但我需要的东西更加兼容。

多谢了，

埃利奥特

有帮助吗？

解决方案

您不能用background-image做到这一点，因为它不支持大小。你必须伪造它通过把在两个方向延伸100％，其定位使用绝对定位和img内容后面的z-index标签。像这样的东西应该工作：

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

和在CSS：

html, body {
    min-height: 100%;
}

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

没有测试过这一点，但应该给你至少有一些起动器。

其他提示

这里的特技（从 http://css-tricks.com /如何对调整大小背景图像/ ）

定义图像是这样的：

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

和你的CSS是这样的：

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

如果你的计划有一个非常光屏幕上它是好的。
但是如果计划使用的图像作为背景对于一个拥挤的网页，这里有一些原因，我们放弃了这一功能：

  • 一些浏览器中有一个困难的时期，以使其：第一时间，在此期间的回流和窗口的调整。

  • 每张图片我们不得不花费太多的时间之间找到一个平衡的文件大小和画面定义。它不容易与不断增长的用户基有大屏幕。

  • 我们甚至试图载的第一个低分辨率的版图片，虽然大物的装载。它给了一个非常好的效果，但是，消耗更多资源的浏览器

一旦我们下降了被拉伸的图像，我们的程序是快速的再次和我们停止拖延通过的画；)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top