用图像制作 Retina 项目符号

Question

我目前使用的是客户图片，而不是要点。我使用以下 CSS 进行了设置，并且效果很好：

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

问题是我正在使用的图像故意将其尺寸增加一倍，以便它可以是 Retina 质量......但我似乎无法找到一种方法来指定正在使用的图像的高度作为要点...有没有其他方法可以让图像显示为 Retina（2x 版本缩小到 12 x 12，而不是 24 x 24 的实际尺寸）？

Answer 1

你可以这样做来达到同样的效果：

（删除项目符号并将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;
}