使视网膜点的图像

问题描述：

我目前有一个客户图片，我用来代替项目符号。我设置了以下CSS和它工作正常：

I currently have a customer image that I am using in stead of bullet points. I have that set up with the following CSS and it works fine:

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

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

The trouble is that the image that I am using is purposely double the size that it needs to be so that it can be Retina quality... But I cannot seem to find a way to specify the height of the image being used as the bullet points... Is there any other way to get the image to show as Retina (the 2x version scaled down to 12 by 12 as opposed to the actual size of 24 x 24)?

答

做这样的事情以达到相同的效果：

you can do something like this to achieve the same effect:

（删除项目符号并设置背景 code> li ，然后进行一些调整）

(remove the bullet points and set a background to your li and then make some adjustments)

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>

fiddle：
http://jsfiddle.net/o17sfjto/

如果您希望使用多行文字...您可以使用其他解决方法，请参阅：

if you want this to work with multi-line text... you can use a different workaround, see here:

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

相关推荐