使用background-position的好处

background-position 
 1 <style type="text/css">
 2 input{
 3     width:197px;
 4     height:20px;
 5     margin-top:7px;
 6     border:1px solid #000;
 7     background-repeat:no-repeat;
 8     padding-left:20px;
 9     background-position:2px 4px;
10     
11 }
12 .username{
13     background-image:url(1.png);
14 }
15 
16 .password{
17     background-image:url(2.png);
18 }
19 </style>
20 </head>
21 
22 <body>
23     
24     <input type="text" class="username"/>
25     <br/>
26     <input type="password" class="password"/>
27 </body>
28 </html>

 使用background-position之后，就不必要切割图片了，可以将所有图标都放在一张图片下，这样就加快了网页的打开速度！

posted @ 2012-07-29 12:56  何小盒  阅读(208)  评论(0)  编辑  收藏  举报