如何在CSS中使用精灵图像？

Question

问题：

我目前有这个HTML：

.bx-prevs{right: 15px!important; background:url("http://localhost/assets/images/mobile-sprites.png")10px 10px no-repeat !important; background-repeat:no-repeat}.bx-wrapper .bx-prevs{left:10px;background-position:0 0}.bx-wrapper .bx-nexts{right:15px;background-position:-41px 0}.bx-wrapper .bx-prevs:hover{background-position:0 0}.bx-wrapper .bx-nexts:hover{background-position:-41px 0} 

...而且这个CSS：

http://postimg.org/image/lg3bnrowt/

...和这个Sprite图片：

{{1}}

我的问题：

如何从精灵图像计算顶部，右侧，底部，左侧

我是CSS的新手，所以请善待......

Answer 1

检查此代码段它会对您有所帮助。仅更改背景位置

＆＃13;

＆＃13;

body{background:red}
.bx-prevs{display:block;width:27px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -1px -1px;}
.bx-nexts{display:block;width:27px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -32px -1px;}
.b-nexts{display:block;width:24px; height:23px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -65px -1px;}
.b-prevs{display:block;width:24px; height:23px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -94px -1px;}

＆＃13;

<div class="bx-controls-direction"><a class="bx-prevs" href=""></a><br> <a class="bx-nexts" href=""></a>
<br> <a class="b-nexts" href=""></a>
  <br> <a class="b-prevs" href=""></a>






</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是完整的，请检查一下。

＆＃13;

＆＃13;

body{background:red}
.bx-prevs{display:block;width:27px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -1px -1px;}
.bx-nexts{display:block;width:27px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -32px -1px;}
.b-nexts{display:block;width:24px; height:23px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -65px -1px;}
.b-prevs{display:block;width:24px; height:23px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -94px -1px;}
.b1{display:block;width:18px; height:18px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -123px -1px;}
.b2 {display:block;width:18px; height:18px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -144px 1px;}
.b3 {display:block;width:18px; height:18px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -162px 0px;}
.b4 {display:block;width:25px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -185px -2px;}
.b5 {display:block;width:25px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -216px -2px;}
.b6 {display:block;width:25px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -246px -2px;}
.b7 {display:block;width:39px; height:34px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -275px -1px;}

＆＃13;

<div class="bx-controls-direction"><a class="bx-prevs" href=""></a><br> <a class="bx-nexts" href=""></a>
<br> <a class="b-nexts" href=""></a>
  <br> <a class="b-prevs" href=""></a>
  <br> <a class="b1" href=""></a>
  <br> <a class="b2" href=""></a>
  <br> <a class="b3" href=""></a>
  <br> <a class="b4" href=""></a>
  <br> <a class="b5" href=""></a>
  <br> <a class="b6" href=""></a>
  <br> <a class="b7" href=""></a>

</div>

＆＃13;

＆＃13;

＆＃13;