有关css图片背景定位技术

浏览数：21 / 时间：2015年06月09日

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 button.cc{
 8     background-image:url(xl.png);
 9     background-position:left bottom;/*用背景图片定位的时候一定要写宽高*/
10     width:150px;
11     height:40px;
12     outline:none;
13 }
14 button.cc:hover{
15     color:#fff;
16 }
17 .aa input{
18     border:none;    /*去掉默认的灰色边框*/
19     height:27px;
20     width:145px;
21     background-image:url(xl.png);    
22     background-position:left -140px;/*-40一定是一个图片从上到下面的距离*/
23     outline:none;   /*去掉默认的橙色边框*/
24     display:block;
25     float:left;
26      padding-left:5px;
27     
28     
29     }
30 .bb input{
31     border:none;
32     height:28px;
33     width:30px;
34     background-image:url(xl.png);
35     background-position:-145px -140px;
36     display:block;
37     float:left;                      /*控制哪个就让那个左对齐，如果没有效果试试把他改成盒子模型*/
38     outline:none;
39     }
40 
41 
42 
43 </style>
44 </head>
45 
46 <body>
47 <button class="cc">用户注册</button>
48 <button class="cc">提交</button>
49 <br><br><br>
50 <form action="save.php" method="post">
51 <div class="ab">
52 <div class="aa">
53 <input type="text" name="seach" placeholder="搜索关键字">
54 </div>
55 <div class="bb">
56 <input type="submit" name="seach" value="">
57 </div>
58 </div>
59 </form>
60 
61 
62 <br><br><br><br><hr>
63 <img src="xl.png">
64 
65 
66 
67 </body>
68 </html>