<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 管理系统(div垂直水平居中，背景图片自适应例子，各种浏览器兼容) </title> <style type="text/css"> html{ width:100%; height:100%; margin:0; padding:0; } body{ width:100%; height:100%; margin:0; padding:0; } #backgroundImage{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: -1; } #backgroundImage img{ width: 100%; height: 100%; } div.center_div{ width:400px; height:300px; margin:0 auto; position:absolute;/*层漂浮*/ top:60%; left:48%; margin-top:-150px;/*注意这里必须是DIV高度的一半*/ margin-left:-150px;/*这里是DIV宽度的一半*/ } .myButton { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5)); background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0); background-color:#79bbff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #84bbf3; display:inline-block; cursor:pointer; color:#ffffff; font-family:宋体; font-size:28px; font-weight:bold; padding:20px 76px; text-decoration:none; text-shadow:0px 1px 0px #528ecc; } .myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff)); background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%); background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%); background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0); background-color:#378de5; } .myButton:active { position:relative; top:1px; } </style> </head> <body> <div id="backgroundImage"> <img src="http://sandbox.runjs.cn/uploads/rs/324/nf0xrktw/bg2.jpg"> </div> <div class="center_div"> <a href="http://www.baidu.com" class="myButton">a信息模块</a><br> <br> <br> <a href="http://www.sogou.com" class="myButton">b信息模块</a> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » div垂直水平居中，背景图片自适应例子，各种浏览器兼容 喜欢 (0)or分享 (0)
