自定义项目符号点大小问题。插入了 img 自定义项目符号点但无法调整项目符号的大小

Question

我使用的 img 似乎非常大，我想减小它的大小，以便它适合作为要点。目前它只是扭曲了整个网站，我不知道如何编辑大小。

ul {
  list-style-position: inside;
  padding-left: 2rem;
  list-style-image: url("https://i.ibb.co/NLbMNTw/KA-Icon-Burgundy.jpg"); 


}

ul li{
  padding-left: 2rem;
}

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

CSS 列表图像没有像背景图像那样提供扩展样式，因此必须相当有创意才能使用背景图像而不是列表图像。其次列表图像裁剪背景图像可以调整大小的图像。

下面的两个例子都是明智的。

示例一：如果您需要 UL 标签上的图像而不是列表的其余部分

ul {
  list-style-position: inside; 
  background: url("https://i.ibb.co/NLbMNTw/KA-Icon-Burgundy.jpg") no-repeat;
background-size: 15px;


}

ul li{
  padding-left: 20px;
}

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

示例二：如果您需要 LI 标签上的图片，大多数情况下都会这样

ul {
  list-style-position: inside;
  list-style-type: none;
 padding=0;
 margin=0

}

ul li{
        
      background: url("https://i.ibb.co/NLbMNTw/KA-Icon-Burgundy.jpg") no-repeat;
background-size: 15px;
 padding-left: 20px;
}

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

自定义项目符号点大小问题。插入了 img 自定义项目符号点但无法调整项目符号的大小

Custom bullet point sizing problem. Inserted a img custom bullet point but cannot adjust the size of the bullet

html

css

html-lists