背景简介：之前写一个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轴的值；