图片小精灵，当有整张图片时可以通过图片小精灵设置图标。
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#xiao{
width: 50px;
height:50px;
border: 1px solid red;
position: absolute;
top: 100px;
left: 200px;
background:url(floor_nav.png) no-repeat;
background-position:0px -110px;
}
</style>
</head>
<body>
<div id="xiao">
</div>
</body>
</html>
2.当同时给一个块级元素设置背景颜色和背景图片时解决问题
分开设置每一个属性
background-color: ;
background-image: ;
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-image:url(../images/tupian/亚麻布_看图王.jpg);
}
#wrap{
width: 500px;
margin: 0 auto;
}
#login{
width:350px;
height:400px;
background-color: #F7F7F7;
position: absolute;
margin: 50px;
box-shadow: 2px 2px 10px 8px #C9CDD4;
z-index: 2;
border-radius: 5px;
left:424px;
}
input{
position: relative;
top:90%;
left:45%;
}
#register{
width:350px;
height:520px;
background-color: #F7F7F7;
position: absolute;
margin: 50px;
box-shadow: 2px 2px 10px 8px #C9CDD4;
border-radius: 5px;
opacity: 0;
left:374px;
}
</style>
<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#login>input").on("click",function(){
$("#login").animate({
left:"-450px",
opacity:"1"
},500,function(){
$("#login").css({
left:"374px",opacity:0
});
});
$("#register").animate({
left:"424px",
opacity:"1"
},500);
});
$("#register>input").on("click",function(){
$("#register").animate({
left:"-450px",
opacity:"1"
},500,function(){
$("#register").css({
left:"374px",opacity:0
});
});
$("#login").animate({
left:"424px",
opacity:"1"
},500);
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="login">
<input type="button" name="" id="" value="register" />
</div>
<div id="register">
<input type="button" name="" id="" value="login" />
</div>
</div>
</body>
</html>
