自定义 html 项目符号点未显示，仅显示正常项目符号点而不是我放入的自定义图像

Question

我已放入自定义 CSS 以确保在我的 ul 和 li 上显示自定义项目符号 IMG。 IMG 未显示，仅显示默认项目符号点，我所做的任何更改都无济于事。它要么导致一切扭曲，要么什么都没有发生。

如果可以请告知。

代码如下：

ul {
  list-style-position: inside;
  padding-left: 2rem;
  list-style-type:  !important;

} */



ul li {

  padding-left: 2rem;
  list-style-image: url(<img src="https://i.ibb.co/Tk59zVR/bullet-2.png" alt="bullet-2" border="0">);
  background-position: 0 0;
  background-size: 0

  
}

 <p class="section-subtitle">
          <ul>
            <li>Savings on running costs/in-house labour costs</li>
            <li>Allows you to stay focused on your core-business without distractions. </li>

            <li>Reduce risk – government regulations non-compliance fines</li>

            <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy
            </li>
          </ul>
          </p>

Answer 1

list-style-image 必须为 ul 定义并且 img 源未正确使用。

ul {
  list-style-position: inside;
  padding-left: 2rem;
  /*you probably do not need this*/
  /*list-style-type: !important;*/
  list-style-image: url("https://i.ibb.co/Tk59zVR/bullet-2.png");
}

ul li {
  padding-left: 2rem;
  /*you probably do not need this*/
  /*background-position: 0 0; */
  /*background-size: 0*/
}

<p class="section-subtitle">
  <ul>
    <li>Savings on running costs/in-house labour costs</li>
    <li>Allows you to stay focused on your core-business without distractions. </li>

    <li>Reduce risk – government regulations non-compliance fines</li>

    <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy
    </li>
  </ul>
</p>

Answer 2

list-style-image 应该只包含图片的路径。您在浏览器无法识别的 list-style-image 中写入 HTML。

你应该像这样使用 list-style-image:

ul {
  list-style-position: inside;
  padding-left: 2rem;
  list-style-image: url("https://i.ibb.co/Tk59zVR/bullet-2.png") !important;
}

自定义 html 项目符号点未显示，仅显示正常项目符号点而不是我放入的自定义图像

Custom html bullet points not showing, only normal bullet points show not the custom image i put in

html

css

html-lists