将多张图整合到一张大图中，再用css定位技术

2019独角兽企业重金招聘Python工程师标准>>>

  以前做网站的时候，经常有地方要用小图标。第一次接触bootstrap的时候，下载打开它的源文件的时候只看到了两张图，就是包含很多小图标的大图。总所周知，bootstrap用到图标的地方很多，但是我一直不知道他们是怎么做到的。今天再写一个JavaScript demo的时候，又遇到了这个问题。所以就趁此机会研究了一下：
      这是一种关于css sprites的技术，就是将多张图放在一张大图中，然后通过css的background-position属性来实现的。采用这种方法，有如下：
      （1）通过整合图片，从而减少服务器的请求次数，加快加载速度。
      要实现这个效果，还得研究一下background-position。
      background-position说明：
      该样式是指设置背景图片的位置：并且必须制定background-image属性，该属性定位不受对象的补丁属性( padding )设置影响。
      可能的值：
      （1）
        top left
        top center
        top right
        center left
        center center
        center right
        bottom left
        bottom center
        bottom right
        当只给定一个值时，则第二个值默认为center
       （2) x% y%
       第一个指的是水平值，第二个指的是垂直方向上的值，左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。
       （3）x ,y
       第一个值指的是水平方向上的具体偏移值，第二个值指的是垂直方向上的具体偏移值
       左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

       介绍完这一个关键的技术之后，要想实现最后的效果，还得需要你给所要设置的元素加一个高宽的限制，这样在无形中就相当于对整张背景图片进行裁剪。并且结合overflow：hidden属性。

       实例：

在一个提交按钮中假如搜索背景图：

              <input type="submit" class="submit" value=""/>

css样式：

.submit{background:#ffb900 url(hpc14.png) no-repeat; width:37px;height: 37px;border: 5px solid #ffb900;background-position: -224px -52p;overfkow:hidden;}

      

转载于:https://my.oschina.net/sunshinewyf/blog/483860