1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 /*提升移动端响应区域的大小*/
12 a{
13 width: 50px;
14 height: 50px;
15 display: block;
16 background-color: #ddd;
17 margin: 100px auto;
18 box-sizing: border-box;
19
20 background-image: url("../img/login.gif");
21 background-size: 202px 44px;
22 /*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
23 background-position: -37px -5px;
24
25 /*添加padding*/
26 padding: 10px;
27 /*设置背景坐标的原点*/
28 /*
29 border-box：从border的位置开始填充背景，会与border重叠
30 padding-box：从padding的位置开始填充背景，会与padding重叠
31 content-box：从content的位置开始填充背景，会与content重叠
32 */
33 background-origin: content-box;
34 /*设置内容的裁切：设置裁切，控制的是显示
35 border-box：显示border以及以内内容
36 padding-box：显示padding以及以内内容
37 content-box：显示content以及以内内容
38 */
39 background-clip: content-box;
40 }
41 </style>
42 </head>
43 <body>
44 <a href=""></a>
45 </body>
46 </html>
