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>