可扩展的背景HTML CSS JavaScript [英] Scalable Background HTML CSS Javascript
问题描述
有没有人知道有一种方法让背景图片缩放到它所在的浏览器窗口的尺寸？我知道CSS3允许背景宽度，但我需要一些更兼容的。
Does anyone know of a way to have a background image scale to the dimensions of the browser window it is in? I know CSS3 allows for background width, but I need something more compatible.
非常感谢，
Elliott
推荐答案
您不能使用 background-image 不支持大小调整。你必须通过放置一个 img 标签，双向延伸100％，并使用绝对定位和 z-index 。这样的东西应该工作：
You cannot do it with a background-image, as it does not support sizing. You have to fake it by putting an img tag that stretches 100% in both directions and position it behind your content using absolute positioning and z-index. Something like this should work:
<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%;
}
没有测试，但至少应该给你一些启动器。
Haven't tested that, but that should give you some starters at least.
这篇关于可扩展的背景HTML CSS JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
