使视网膜要点与图片(Making Retina bullet points with images)

目前，我有我正在使用的要点代替客户图像。我有一个设置与下面的CSS和正常工作：

ul.benefits {
    list-style-image: url('/images/bullet-point-circle.png');
}

麻烦的是，被用作子弹，我现在用的是，它需要，以便它可以是视网膜质量大小故意翻番......但我似乎无法找到一种方法来指定图像的高度图像点...是否有任何其他方式获得的图像显示为视网膜（2倍版本12缩小到12，而不是24×24的实际大小）？

你可以做这样的事情，以达到同样的效果：

（取出子弹点和设置background ，以您的li ，然后做出一些调整）

ul{
    list-style:none;
}

ul li{
 background:url('http://bowlingballexchange.com/applied/misc/facebook24by24.gif') no-repeat left;
    background-size:12px 12px;
}


ul li span{
    margin-left:15px;
}

HTML：

<ul>

<li><span>list 1</span></li>

<li><span>list 2</span></li>

<li><span>list 3</span></li>

<li><span>list 4</span></li>

<ul>

小提琴： http://jsfiddle.net/o17sfjto/

如果你想这与多行文本的工作......你可以使用不同的解决方法，在这里看到：

http://jsfiddle.net/SGz75/4/

<ul class="test">
<li><div class="bullet"></div><div class="one">Text Text Text</div></li>
<li><div class="bullet"></div><div class="one">Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></li>
<li><div class="bullet"></div><div class="one">Text Text Text</div></li>

CSS：

.test {
list-style: none;
margin: 0;
padding: 0;
}

li > div{
    display:inline-block;
    height:100%;
    //background:red;
    width:5%;
    vertical-align:top;
}

.one{
    width:95%;
}

.bullet{
height:20px;
width:20px;  background:url('http://bowlingballexchange.com/applied/misc/facebook24by24.gif') no-repeat left;
    background-size:12px 12px;
}