div+css网页背景图片无限延伸实现:此代码能将一张很大的背景图片设置成背景,解决了复杂图片不能用来重复而导致背景图片单调的问题,能兼容80%以上的浏览器,在网页的左侧跟右侧,而且能随分辨率的大小,自己进行位置的伸缩!
实现原理:用绝对定位将网页的最左跟最右端各放一个层,将它用z-index放到网页最底层,层的宽度各占浏览器的50%;高度占浏览器的100%;用背景坐标来控制背景图片显示的位置!分辨率小的显示器看不到的地方将隐藏,中间层居中,两边留出背景宽度一致!
代码如下:
<!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>
<style type=”text/css”>
body{margin:0;padding:0;}
#main{width:970px;height:700px;margin:0 auto;background:#fff;}
.left{ position:absolute;left:0px;top:0px;width:50%;background:url(bg-03299.jpg) no-repeat 0px 0px;height:100%;z-index :-1}
.right{position:absolute;left:50%;width:50%;top:0px;background:url(bg-03299.jpg) no-repeat 0px 0px;height:100%;z-index :-1}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>div+css网页背景图片无限延伸实现</title>
</head>
<body>
<!–左背景–>
<div></div>
<!–右背景–>
<div></div>
<div id=”main”>中间主层代码加在此
</div>
</body>
</html>
本站文章欢迎转载。转载请注明：转载自迷失曾经谢谢！
原文链接地址：div+css网页背景图片无限延伸实现 Tags: div+css, 网页壁纸背景, 网页背景图片无限延伸实现
