背景簡介：之前寫一個h5前端登陸頁面時候，碰到一個圖片很大但是界面的背景圖我只需要圖片中很小的一部分；
背景示例：需要具體效果為：
效果中只提供了三張背景圖片，其中微信、qq一張圖片，免輸入一排是一張圖片，立即注冊前邊和角標和界面其他圖片用的同一張圖片；（之所以多個位置使用一張背景圖片是因為項目需要提高資源的復用性，這個不做過多解釋；）
資源就是這樣，然后寫出上邊的效果圖，不做過多的分析，本篇博客推薦使用background方法，具體如下；
解決思路：
一、PS方法裁掉多余的部分<img src="tulip.jpg" alt=" 郁金香" />方法加上去，然后修改圖片樣式，（此處一定是裁剪后的圖片才可以，如果是沒裁剪掉的圖片的話是沒法達到只顯示部分區域的效果的；）第一種方法違背了復用性的原則，所以不建議寫項目時候使用；
二、css樣式中background搞定；具體如下：
1 <head> 2 <title></title> 3 <style type="text/css"> 4 .ad{ 5 width:15px; 6 height:15px; 7 border:1px solid red; 8 background:url("./img/pwd-icons-new.png") no-repeat -104px -75px; 9 } 10 .ae{ 11 width:2px; 12 height:20px; 13 border-left:1px solid red; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="ad"> 19 立即注冊 20 </div> 21 <br/><br/><br/><br/><br/> 22 <div class="ae"> 23 這里是靠左的一條豎線 24 </div> 25 </body>
具體解釋：background:url()<!--添加背景圖不用過多解釋-->
顯示區域使用no-repeat控制：背景圖像只顯示一次不會存在平鋪問題，第一個值為x軸值，第二個值為y軸的值；