Question

尝试制作背景图片而不是子弹点，但却无法理解为什么它们没有正确显示？

我需要它们来显示不同的背景，这取决于它在数字上的子弹。例如，每个背景不同的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
}

Answer 1

该文件称为sprite。在您的情况下，每个框都是单个图像。在你的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>

Answer 2

需要使用：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;
}

等... https://jsfiddle.net/Luw0u4h2/2/

带有不同背景图像的子弹点

2 个答案: