圖片小精靈,當有整張圖片時能夠經過圖片小精靈設置圖標。javascript
例如css
<!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.當同時給一個塊級元素設置背景顏色和背景圖片時解決問題html
分開設置每個屬性java
background-color: ;jquery
background-image: ;url
3.htm
<!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>