html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://www.miaov.com/student/lyq/style.css"/>
</head>
<body>
<div id="nav">
<a id="logo" href="index.html"></a>
<ul id="menu">
<li id="bg" >
<ul id="ul-list">
<li ><a href="index.html">Home</a></li>
<li ><a href="javascript:;" target="_self" >About</a></li>
<li><a href="javascript:;" target="_self">News</a></li>
<li ><a href="javascript:;" target="_self">wroks</a></li>
<li ><a href="javascript:;" target="_self">Photo</a></li>
<li ><a href="javascript:;" target="_self">hof</a></li>
<li ><a href="javascript:;" target="_self">contact</a></li>
</ul>
</li>
<li class="box" ><a href="index.html" >Home</a></li>
<li class="box" ><a href="javascript:;" target="_self">About</a></li>
<li class="box" ><a href="javascript:;" target="_self">News</a></li>
<li class="box" ><a href="javascript:;" target="_self">wroks</a></li>
<li class="box" ><a href="javascript:;" target="_self">Photo</a></li>
<li class="box" ><a href="javascript:;" target="_self">hof</a></li>
<li class="box" ><a href="javascript:;" target="_self">contact</a></li>
</ul>
</div>
<div id="max-box">
<div id="home" style=" background-position:50% 0px">
<div class="handImg" style=" background-position:50% 0px"></div>
<div class="textImg" style=" background-position:50% 0px"></div>
<div class="penImg"></div>
</div>
<!--首页-->
<div id="about" style="background-position:50% 20px">
<div class="contents">
<div class="aboutRound">
<div class="columnSpace">
<div class="border">
<div class="borderRight">
<div class="top"></div>
</div>
<div class="bordermind">
<div class="borderContens">
<div class="show">
<div class="comptitle_05 ">
<em>
<span class="extendLink">
<a href="index.html#home" target="_self">更多详细+</a>
</span>
</em>
</div>
<div class="dit">
<div class="aboutText">
李艳秋
</br>
女|26岁|1988年8月26日
</br>
</br>
</br>
对研究Html5+CSS3+JavaScript有浓厚兴趣。
</br>
精通Html+CSS|熟练JavaScript
</br>
熟练浏览器兼容性调试、了解简单的html5和css3
</br>
.......
</div>
</div>
</div>
<div class="clearBoth"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="balloon" style="background-position:50% 0"></div>
<div class="compasses" style="background-position:50% -50px"></div>
</div>
<div id="about-cont" style="background-position:50% 4px">
<div class="contents">
<div class="aboutRound">
<iframe allowtransparency="true" frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" width="600">#document</iframe>
<a class="close_btu" href="#about">关闭 ×</a>
</div>
</div>
<div class="balloon" style="background-position:50% 0"></div>
<div class="compasses" style="background-position:50% -19px"></div>
<div class="compasses1" style="background-position:50% -4px"></div>
</div>
<div id="new" style="background-position:50% 0">
<div class="contents">
<div id="left-news">
<iframe allowtransparency="true" frameborder="0" height="650" marginheight="0" marginwidth="0" scrolling="no" src="new.html" width="800">#docuemnt</iframe>
</div>
</div>
</div>
<div id="Project" style=" background-position:50% 23px">
<div class="pro_img">
<iframe allowtransparency="true" frameborder="0" height="700" marginheight="0" marginwidth="0" scrolling="no" src="Project.html" width="720">
#document
</iframe>
</div>
<div class="bulb1" style=" background-position:60% 0px"></div>
<div class="bulbl2" style=" background-position:60% -26px"></div>
</div>
<div id="sector" style=" background-position:50% -17px">
<div class="contents">
<div class="sector_img">
<iframe allowtransparency="true" frameborder="0" height="680" marginheight="0" marginwidth="0" scrolling="no" src="sector.html" width="600"></iframe>
</div>
</div>
<div class="pop" style="background-position:50% 84px;"></div>
<div class="clock" style=" background-position:50% 0"></div>
</div>
<div id="tree">
<div class="contents">
<iframe allowtransparency="true" frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" src="tree.html" width="500"></iframe>
</div>
<div class="Horse" style=" background-position:50% 0"></div>
</div>
</body>
</html>
视差原理就是背景图 fix