网页全屏背景设计 

body{
    text-align:center;
    margin:0;
    background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507892240189&di=69b352da384dd7ad36aec8e75705361d&imgtype=0&src=http%3A%2F%2Fp.yjbys.com%2Fimage%2F20161207%2F1481083539122730.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
}

#login{
    margin:0 auto;
    width:300px;
    text-align:right;
}
#login input{
    margin:5px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>QA系统</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
 <div id="container">
    <div id="login">
        <form>
        公司邮箱：<input type="email" name="email" autocomplete="on" autofocus placeholder="请使用邮箱名" required/><br/>
        密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：<input type="password" name="password" required placeholder="请输入密码"/><br/>
        <input type="submit" value="登录"/>
        </form>
    </div>
    <script>
    var container=docment.getElementById("container");
    container.style.backgroundImage="url(http://www.iteye.com/upload/logo/user/37073/648c9ed4-f54b-3f4a-ac54-905f5a483307.gif?1236833802)";
    </script>
 </div>
</body>
</html>

效果截图：

 

posted @ 2017-10-13 16:10  星剑  阅读(179)  评论(0)  编辑  收藏  举报