我有这个CSS代码： style body { position:absolute; background-image: url(art/c11.jpg); width:100%; height:100%; }/style 正如我在网上看到的那样,我希望这会调整背景图像的大小并使其适合浏览器窗口. 但不是
<style>
body {
position:absolute;
background-image: url(art/c11.jpg);
width:100%;
height:100%;
}
</style>
正如我在网上看到的那样,我希望这会调整背景图像的大小并使其适合浏览器窗口.
但不是.我想我显然做错了(我不太了解CSS).有小费吗？
更新：
我添加了洞的例子(不工作)：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
body {
position:absolute;
background-image:url(art/c11.jpg);
background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;
}
</style>
</head>
<body >
</body>
</html>
如果您要通过浏览器进行此项工作,最好在页面上放置一个图像,然后将所有内容包装在放在顶部的DIV中.例如.
CSS
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
}
如果您打算支持IE6,请添加以下代码段：
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
}
#background {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->
HTML
<img id="background" src="art/c11.jpg" alt="" /> <div id="content"> Your content </div>
Code in action.