[英]bullet point with different background images
尝试制作背景图像而不是要点,但看不到为什么显示不正确?
我需要他们显示不同的背景,具体取决于数字上的项目符号。 例如10个子弹,每个子弹具有不同的背景。
https://jsfiddle.net/bigdaddyt_351/nb21c7v4/1/
<ul>
<li>bullet 1</li>
<li>bullet 2</li>
<li>bullet 3</li>
<li>bullet 4</li>
<li>bullet 5</li>
<li>bullet 6</li>
<li>bullet 7</li>
<li>bullet 8</li>
<li>bullet 9</li>
<li>bullet 10</li>
</ul>
li{
background: url('http://www.amiriconstruction.co.uk/wp-content/uploads/2015/08/Untitled-10.jpg') no-repeat left center;
display:block;
text-indent:15px;
line-height:1.5em
}
该文件称为精灵。 在您的情况下,每个框都是单个图像。 在您的CSS中尝试以下操作:
.bullet {background: url('http://www.tonytansley.co.uk/so/Untitled-10.jpg') no-repeat; display: inline-block; width: 12px; height: 12px; margin-right: 5px;}
.bullet-1 {background-position: 0px 0px;}
.bullet-2 {background-position: 5px 0px;}
在列表项中,您需要删除边距和填充。 使用这种方式:
li {margin: 0; padding: 0; list-style: none;}
并在HTML中将其指定为:
<li><i class="bullet bullet-1"></i> Hello</li>
等等。
片段
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} .bullet {background: url('http://www.tonytansley.co.uk/so/Untitled-10.jpg') no-repeat; display: inline-block; width: 10px; height: 10px; margin-right: 5px;} .bullet-1 {background-position: 0px 0px;} .bullet-2 {background-position: -10px 0px;} .bullet-3 {background-position: -20px 0px;} .bullet-4 {background-position: -30px 0px;} .bullet-5 {background-position: -40px 0px;} .bullet-6 {background-position: -50px 0px;} .bullet-7 {background-position: -60px 0px;} .bullet-8 {background-position: -70px 0px;} .bullet-9 {background-position: -80px 0px;} .bullet-10 {background-position: -90px 0px;}
<ul class="bullets"> <li><i class="bullet bullet-1"></i> Bullet 1</li> <li><i class="bullet bullet-2"></i> Bullet 2</li> <li><i class="bullet bullet-3"></i> Bullet 3</li> <li><i class="bullet bullet-4"></i> Bullet 4</li> <li><i class="bullet bullet-5"></i> Bullet 5</li> <li><i class="bullet bullet-6"></i> Bullet 6</li> <li><i class="bullet bullet-7"></i> Bullet 7</li> <li><i class="bullet bullet-8"></i> Bullet 8</li> <li><i class="bullet bullet-9"></i> Bullet 9</li> <li><i class="bullet bullet-10"></i> Bullet 10</li> </ul>
需要使用:before元素和nth-of-type。 例如
li:before{
background: url('http://www.amiriconstruction.co.uk/wp-content/uploads/2015/08/Untitled-10.jpg') no-repeat left 50%;
display:block;
width:10px;
height:10px;
position:absolute;
content: " ";
top:10px;
left:0;
}
li:first-of-type:before{
background-position:0 0;
}
li:nth-of-type(2):before{
background-position:-10px 0;
}
li:nth-of-type(3):before{
background-position:-20px 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.