使用background-position的好处

转载于 2012-07-29 12:56:00 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/he1229/archive/2012/07/29/2613950.html

本文介绍如何通过使用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>