将图像用作要点

Question

我在使用图像作为项目符号点时遇到问题-项目符号点的位置像我想要的那样，只有只有一行文本的项目符号点，但是当它们有多行文本时，项目符号点就不会从开始，但在中间。 有什么方法可以使用怪异的图像画布技巧来定位这2个要点？是针对这2个项目符号使用其他图像（例如，带有巨大底部画布的图像）的最佳解决方案？

这就是我在说的：

第二个项目符号点在此处的位置不正确：
最后的项目符号位置在这里不正确：

HTML：

<ul class="service-box__list">
              <li class="service-box__item">
                Võtame enda kanda kogu igapäevase kinnisvarahalduse, sh ka kõik omaniku kohustused;
              </li>
              <li class="service-box__item">
                Pakume kinnisvara korrashoidu, tarbimis (nt. elekter, küte, vesi, kanalisatsiooni ning kommunikatsioon)
                -ja tugiteenused (nt parkimiskorraldus, valvesüsteemid);
              </li>
              <li class="service-box__item">
                Dokumenteerimine objektiga seotud infovahetuse oma digitaalsesse andmebaasi;
              </li>
              <li class="service-box__item">
                Organiseerimine kõik vajalikud ehitus- ja remonditööd;
              </li>
              <li class="service-box__item">
                Koostame perioodilised eelarved ning aruandluse vastavalt Sinu äri vajadustele ja isikupäradele;
              </li>
              <li class="service-box__item">
                Viime läbi objektiga seonduvate andmete regulaarse analüüsi, et parandada hoone võtmenäitajaid.
              </li>
</ul>

CSS：

&__list {
    list-style: none;
}

&__item {
    font-size: $default-font-size;
    background: url('./../img/roheline-leht-2.png') no-repeat left;
    padding-left: 2.5rem;  
}

Answer 1

使用list-style-image

ul {
    list-style-image: url('image.png');
}

在您的示例中：

.service-box__list {
    list-style-image: url('../../img/roheline-leht-2.png');
}