@charset "utf-8"; *{ margin: 0px; padding: 0px; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 12px; } a{ text-decoration: none; } html{ width: 100%; height: 100%; overflow-x:hidden; overflow-y:auto; } body{ width: 100%; min-height: 100%; } .login-bg{ background:url(./bg.png) no-repeat center; background-size: cover; overflow: hidden; }
html代码：
<!doctype html> <head> <meta charset="utf-8"> <title></title> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8, target-densitydpi=low-dpi" /> <meta http-equiv="cache-control" content="no-siteapp" /> </head> <body class="login-bg"> //你的内容 </body> </html>
以上就是css如何实现背景图电脑端/手机端自适应功能的详细内容。