记录一次img替换background：url（" "）;来做网页背景的例子：
网页自适应兼容到ie7;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>***后台登录</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
<img src="./img/bac.jpg" alt="" class=" bac" id="pic">
<div class="bacBox clearFix">
<div class="loginContent float_l clearFix">
<div class="float_l logoBox">
<img src="./img/min_bac.jpg" alt="" class="min_bac">
<div class="title">
<img src="./img/logo.png" alt="" class="logo">
<a class="bankName">*****</a>
<h1>互联网信贷管理平台</h1>
</div>
</div>
<div class="float_r login_con">
<div class="personUiBox">
<img src="./img/mine_fill.png" alt="" class="person_ui">
</div>
<div class="name ">
<input type="text" class="">
<img src="./img/people_fill.png" alt="" class="people_fill ">
<p class="name_text">请输入用户名</p>
</div>
<div class="password">
<input type="password">
<img src="./img/passwordIcon.png" alt="" class="passwordIcon ">
<p class="password_text">请输入密码</p>
</div>
<div class="anniu">
<a>登录</a>
<a >重置</a>
</div>
</div>
</div>
<div class="copy">
<p>Copyright © 2000-2018 Amarsoft all rights reserved. 上海******股份有限公司</p>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
<script src="./js/login.js"></script>
</html>
js
$(".name input").focus(function(){
$(".name p").text('');
});
$(".password input").focus(function(){
$(".password p").text('');
});
$(".name input").blur(function(){
if( this.value== ''){
$(".name p").text('请输入用户名');
}
});
$(".password input").blur(function(){
if( this.value== ''){
$(".password p").text('请输入密码');
}
});
var box = document.getElementById('pic');
var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
box.style.height = screenHeight + 'px';
$(window).resize(function() {
var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
box.style.height = screenHeight + 'px'
})
css
*{
padding: 0;
margin: 0;
font-family: Microsoft YaHei;
}
input{
outline: none;
}
.float_l{
float:left;
}
.float_r{
float: right;
}
.clearFix:after{
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.bacBox{
width: 1000px;
height: 622px;
margin: 0 auto;
position: relative;
overflow:hidden;
}
#pic{
width: 100%;
height: 100%;
}
.bac{
position: absolute;
top:0;
left: 0;
}
.ad{
font-size: 30px;
}
.loginContent{
float: left;
z-index: 2;
width: 934px;
height: 408px;
position: absolute;
top:16%;
left: 50%;
margin-left: -467px;
border-radius: 10px;
}
/*left start*/
.logoBox{
width: 584px;
height: 100%;
overflow:hidden;
border-radius: 10px;
position: relative;
}
.min_bac{
width: 586;
height: 412px;
position: absolute;
left: -2px;
top:0;
}
.title{
position: absolute;
z-index: 4;
left: 83px;
top:90px;
}
.title h1{
font-size: 51px;
color: #c8280e;
margin-top: 47px;
}
.bankName{
font-size: 34px;
color: #c8280e;
position: absolute;
top: -2px;
}
.logo{
width: 43px;
margin-right: 20px;
vertical-align: middle;
}
/*left end*/
/*login_con start*/
.login_con{
width: 350px;
height: 100%;
background: white;
border-radius: 10px;
}
.personUiBox{
text-align: center;
margin-top: 53px;
}
.person_ui{
width: 80px;
}
.name{
position: relative;
}
.name input{
width: 232px;
height: 20px;
font-size: 16px;
padding:10px 0 10px 50px;
padding-left: 50px;
border-radius: 10px;
border: 1px solid #c8280e;
margin: 20px 0 25px 34px;
color: #c8280e;
position: relative;
background: transparent;
z-index: 20;
}
.password input{
width: 232px;
height: 20px;
font-size: 16px;
padding:10px 0 10px 50px;
border-radius: 10px;
border: 1px solid #c8280e;
margin-left: 34px;
position: relative;
z-index: 20;
background: transparent;
color: #c8280e;
}
.people_fill{
width: 30px;
position: absolute;
top: 25px;
left: 42px;
}
.name_text{
font-size: 16px;
color: #c8280e;
position: absolute;
top: 30px;
left: 85px;
letter-spacing:1px;
}
.password{
position: relative;
}
.passwordIcon{
width: 42px;
position: absolute;
top: 0px;
left: 35px;
}
.password_text{
font-size: 16px;
color: #c8280e;
position: absolute;
top: 10px;
left: 85px;
letter-spacing:1px;
}
.anniu{
margin-top: 40px;
margin: 40px 0 0 53px;
}
.anniu a {
display: inline-block;
width: 100px;
height: 38px;
border-radius: 20px;
top: 48px;
color: white;
background: #c8280e;
font-size: 16px;
text-align: center;
line-height: 38px;
margin-right: 40px;
cursor: pointer;
}
.anniu a:hover{
background: #af1a02;
color: white;
}
/*login_con end*/
/*copy start*/
.copy{
width: 600px;
position: absolute;
z-index: 3;
bottom: 80px;
left: 100px;
font-size: 12px;
color: #eece74;
}
/*copy end*/
