日期:2014-05-17  浏览次数:20752 次

关于背景图平铺问题
插入1像素平铺的图片:


页面代码如下:
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*全局样式*/
body{margin:0 auto; padding:0; font-size:12px; color:#000; font-family:"宋体"}
body > div{margin-right:auto; margin-left:auto} 

/*页面结构*/
.ind_bj{background:#fff url(images/ind_bj.gif) repeat-x top}
.container{width:960px; margin:0 auto}
</style>
</head>
<body>
<div class="ind_bj">
    <div class="container">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
</div>
</body>
</html>



求教,为什么当我拖拽浏览器宽度的时候,背景图的宽度也会随之变化,最后当浏览器宽度到一定程度的时候,右边背景图就会空出来,效果如下:


------解决方案--------------------
这个问题 应该咋说呢, 但声明出现这种结果是正常的,你平铺的背景是没有宽度的,当你把浏览器宽度缩小最终比里面div的宽度还小时 看上去背景是平铺,
另一种说法是div默认满屏 就是 会把body弄满 body就是可视区
下面有滚动条, 但拖动滚动条时 下方没背景,因为你是平铺是把根据body来平铺的,所以只是把你能看到的区给平铺了,看不到的是不会平铺 的,像这种情况需要做两个背景图 就是有宽度那个div还得平铺下这样 当你再操作时下面也会有背景图

说的有点难理解,但你先看看吧,不明白 或哪不懂再问我吧