为 Bootstrap list-group-item 添加背景图片

Question

我有一个 sprite，每个 list-group-item 都可以显示。但是，我无法为 .one、.two 等单独设置每张图片的样式。

<div class="list-group">
    <a href="#" class="list-group-item one">ONE</a>
    <a href="#" class="list-group-item two">TWO</a>      
    <span class="list-group-item three">Share <span class="fb"><!--display FB icon--></span></span>
</div>

少：将文本放在左侧，将图像放在右侧，有效。现在我想为每个 .list-group-item 中的单个图像设置样式。由于图像已经重复了，我只需要将它们定位在每个锚标记的中心，并显示某些像素部分。

.list-group-item {
    width:100%
    height: 50px;
    float: left;
    overflow: hidden;
    text-align:left;
    background: url("Sprite.png") right no-repeat;
}
.one { top:0; left:-15px;}

我也试过显式添加图片，像这样：

<div class="list-group">
    <a href="#" class="list-group-item one">ONE<span class="img"></span></a>
    <a href="#" class="list-group-item two">TWO<span class="img"></span></a>         
    <span class="list-group-item three">Follow <span class="fb"><!--display FB icon--></span>/span>
</div>

我怎样才能让它工作？

Answer 1

我不知道你到底想达到什么目的，但我想应该是这样的：

.img{
    float:right;
    display:inline-block;
    height: 44px;                /*Defines the height portion of the image we want to use*/
    background: url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;
}
#one{
    width: 46px;                   /*Defines the width portion of the image we want to use*/
    background-position: 0 0;      /*Defines the background position (left 0px, top 0px)*/
}
#two{
    width: 43px;
    background-position: -47px 0;  /*Defines the background position 47px to the right (#one width 46px + 1px line divider)*/
}
#three{
    width: 43px;
    background-position: -91px 0;  /*Defines the background position 91px to the right (#home width 46px + 1px line divider + #two width 43px + 1px line divider )*/
}

.list-group-item{
    overflow: hidden;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin-bottom: 50px; text-align:center">
    Lets use this image:
    <img src="http://www.w3schools.com/css/img_navsprites.gif" alt="">
</div>

<div class="list-group"> 
    <a href="#" class="list-group-item">ONE<span id="one"  class="img"></span></a>
    <a href="#" class="list-group-item">TWO<span id="two" class="img"></span></a> 
    <a href="#" class="list-group-item">THREE<span id="three" class="img"></span></a> 
</div>

所以你必须移动你的背景位置来改变你想看到的图像部分。

Here the full example

无论如何，我真的推荐你使用 CSS Sprite 生成器。

为 Bootstrap list-group-item 添加背景图片

Adding background image for Bootstrap list-group-item

css

sprite

background-image

twitter-bootstrap