目的效果如图:
网上搜索了一上午,终于被我整出来了。
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-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-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>