1

我有一个带有正文背景图像的 html 页面。身体<div>内部有一个水平选项卡，内部有一个水平选项卡。Tab1 和 Tab2 的内容长度不同。所以取决于我必须增加和减少身体背景图像的内容。

感谢您！

4

3 回答 3

0 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stretched Background</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>

<body>
    <div id="page-background"><img src="http://www.htmlcodes.me/images/backgrounds/background-image-3.gif" width="100%" height="100%" alt="Fireworks"></div>
    <div id="content">
    <h2>Stretched Background Example</h2>
    <p>The background image here has been acheived using an HTML/CSS hack. The page is layered. The image uses the HTML <code>img</code> tag - not the CSS <code>background-image</code> property.</p>
    <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
    <p>Go ahead - resize your browser!</p>
        <p>Back to the <a href="http://www.htmlcodes.me/backgrounds/stretch-background-image.cfm">stretch background tutorial</a>.</p>
    </div>
</body>
</html>

或者你可以试试这个链接

http://www.htmlcodes.me/backgrounds/stretch-background-image.cfm
于 2012-06-06T07:20:03.837 回答
0

虽然您可以使用该background-size属性，但很少有浏览器支持它。

如果它是一个小图像（类似于纹理），您应该使用background-repeat. 如果没有，也许使用足够大的图像来覆盖整个 div 而无需拉伸。

或者，考虑使用 prash 中详述的 HTML/CSS hack。

于 2012-06-06T07:20:15.030 回答
0

你可以使用重复属性..background-image:repeat: 否则我认为你可以使用

width:100%;
height:100%;
于 2012-06-06T07:30:14.800 回答