目的效果如图：
网上搜索了一上午，终于被我整出来了。
css就可以实现，开始我以为要把效果图直接当背景，通过定位去获取鼠标是否停留在按钮区域。业余的想法终究很业余O(∩_∩)O哈！
贴代码：
<html> <! Copyright (c) Realtek Semiconductor Corp., 2003. All Rights Reserved. -> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <style type="text/css"> body {background-image: url(background_l.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position: 650px 0px; }#background_login{background-image: url(backgroundright.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position: 0px 0px;background-size: cover; }#Log_login{float:left }#login-container {/*display:none;*/width:700px;height:300px;position:relative;border:2px solid #BDBFC1;background:rgba(255,255,255,0.6);margin:0 auto;}.login-title {width:130px;height:50px;position:absolute;left:20px;top:-50px;line-height: 100px;text-align: center;font-weight:bold;color:#FF0000;background-color:#FFFFFF;font-size:18px;font-family: arial;} .testbutton_login {font-family: arial;font-weight: bold;color: #000000 !important;font-size: 16px;box-shadow: 1px 1px 1px #BEE2F9;padding: 9px 60px;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;border: 2px solid #D9E403;background: #D9E403;text-decoration:none; } .testbutton_login:hover {color: #000000 !important;background: #D9E403; }.testbutton_clear {font-family: arial;font-weight: bold;color: #000000 !important;font-size: 16px;box-shadow: 1px 1px 1px #BEE2F9;padding: 9px 60px;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;border: 2px solid #CBCBCB;background: #CBCBCB;text-decoration:none; } .testbutton_clear:hover {color: #000000 !important;background: #CBCBCB; }input {margin: 0;border: 0px solid rgb(180,180,180);border-radius: 6px;-webkit-border-radius:6px;-moz-border-radius :6px; height:37px;width:260px;font-size: 14px;text-align: left; } input:hover {border: 1px solid rgb(255, 0, 0); } </style> </head> <body id="background_login"> <div id="login-container"><div class="login-title">LOGIN PAGE</div><br><br><br><table width="500" border="0" align="center" height="240"><tr><td height="37"><table align="center" style="border-radius:5px;border-top-width:0px;border:1px solid #B7B7B7; background-color:#DFDFDF" width="450" height="37"><tr><td height="37" style="font-family:Arial; font-weight:bold"><div align="right">USERNAME <input type="text" name="textfield2"></div></td></tr></table></td></tr><tr><td height="70"><table align="center" style="border-radius:5px;border-top-width:0px;border:1px solid #B7B7B7; background-color:#DFDFDF" width="450" height="37"><tr><td height="37" style="font-family:Arial; font-weight:bold"><div align="right">PASSWORD <input type="text" name="textfield2"></div></td></tr></table></td></tr><tr><td><div align="center"><a class="testbutton_login" href="#">LOGIN</a> <a class="testbutton_clear" href="#">CLEAR</a></div></td></tr> </table> </div> <script src="md5.js" type="text/javascript"></script><script type="text/javascript">var windowHeight = document.body.clientHeight || window.innerHeight || window.screen.height;var containerObj = document.getElementById('login-container');var containerHeight = containerObj.clientHeight;console.log(containerHeight);var marginTop = (windowHeight - containerHeight)/2; containerObj.style.marginTop = marginTop + "px";// containerObj.style.display="block"; </script> </body> </HTML>
