0

我想在 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>

问题是表格单元格中图像之间的间距！一旦你有一张非常大的桌子，里面有大量的图像，那就太糟糕了。

请帮忙！

4

2 回答 2

2

对于您的表格 div，您可以对其进行返工并添加 background-size: 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，您可能只想使用背景颜色。

于 2013-04-02T18:35:09.030 回答
0

给你的表格宽度 100% 并给表格样式

#content { background-image:url('image.jpg'); }
于 2013-04-02T18:43:02.587 回答