使用background-image为li设置项目符号却变为列表项背景如何解决

你需要给li元素补充背景图控制属性和左侧内边距，具体修改如下：

问题原因 #

你只声明了背景图地址，没有禁用背景图默认的平铺属性，也没有给li预留左侧放置项目符号的空间，所以图片会铺满整个li元素。

修改后的完整CSS代码 #

ul {
  list-style-type: none;
}

li {
  background-image: url('https://via.placeholder.com/50');
  /* 新增以下4个属性，数值可根据你的实际图片尺寸调整 */
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px;
  min-height: 50px;
  /* 若需要缩小项目符号尺寸，可额外添加下面的属性自定义大小 */
  /* background-size: 24px 24px; */
}

属性说明 #

• background-repeat: no-repeat：让背景图只显示一次，不会重复铺满整个li
• background-position: left center：将背景图固定在li左侧垂直居中的位置，对齐常规项目符号的展示位置
• padding-left: 60px：将li内的文字向右偏移，预留出放置项目符号的空间，数值需大于你的图片宽度，留出文字和符号的间距
• min-height: 50px：保证li高度足够容纳你的背景图，避免图片被截断

内容的提问来源于stack exchange，提问作者dmarinus