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

Question

问题：

我目前有这个 HTML :

<div class="bx-controls-direction"><a class="bx-prevs" href="">Prev</a><a class="bx-nexts" href="">Next</a></div>

...还有这个 CSS :

.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}

... 以及这张 Sprite 图片：

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

我的问题：

如何根据精灵图像计算顶部、右侧、底部、左侧

我是 CSS 的新手，所以请多关照...

Answer 1

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

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;}

<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>

Answer 2

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

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;}

<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>

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

How to use sprite image in css?

html

css

image

sprite

问题：

我的问题：