Question

我想放置一个覆盖整个窗口的拉伸背景图像和div和表格中的内容。

此代码可以正常工作：

<!doctype html>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>

<body>
<div id="bg"><img src="../images/background.jpg" width="100%" height="100%" alt=""></div>
<div id="content">

<table>
<tr>
<td>
<img src="images/1.jpg">
</td>
<td>
<img src="images/2.jpg">
</td>
</tr>
</table>

</div>
</body>
</html>

问题是桌子的单元格中的图像之间的间距！一旦你拥有一张包含大量图像的非常大的桌子，这是非常糟糕的。

请帮忙！

Answer 1

对于你的表格div，你可以重做它并添加背景大小：100％100％;

<div id ="bg" style="background-image: url(../image/background.jpg); background-size: 100% 100%;">
    <table>
    <!--table stuff-->
    </table>
</div>

显然，您想要将我的内联css提取到您的css文件中，但这会给您一般的想法。使用IE 6版本，因为它不支持CSS3，您可能只想使用背景颜色。

Answer 2

将表格宽度设为100％并将样式赋予表格

#content { background-image:url('image.jpg'); }

背景拉伸与div +表中的内容

2 个答案: