Making Retina bullet points with images

问题

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

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)?

回答1:

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

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

来源：https://stackoverflow.com/questions/25293734/making-retina-bullet-points-with-images

标签

html

css

retina