Question

我有一个能够按每个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>

LESS：将文本放在左侧，将图像对齐在右侧，正常工作。现在我想在每个.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 Generator。

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

1 个答案: