如何修改作为CSS背景图使用的SVG图标填充颜色？

当然可以，给你三种实用的方法来把SVG的红色填充改成白色：

方法1：将SVG转为Data URI并修改填充色 #

把外部SVG的代码提取出来，直接修改fill属性为白色，再转成Data URI作为背景图使用，这是最直接可控的方式。

原SVG核心代码（提取自你提供的资源）：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="#FF0000"/>
</svg>

修改fill为white后转成Data URI，替换原来的背景图URL：

input:checked {
  background: gray;
  border-color: gray;
  background-repeat: no-repeat;
  /* 修改后的Data URI版本，填充色为白色 */
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="white"/></svg>');
  background-size: 15px;
  background-position: center left 7px;
}

方法2：用CSS滤镜快速转色 #

如果不想折腾SVG代码，可以用CSS滤镜直接把红色转为白色，适合简单的颜色转换场景：

input:checked {
  background: gray;
  border-color: gray;
  background-repeat: no-repeat;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg');
  background-size: 15px;
  background-position: center left 7px;
  /* 先把颜色转黑，再反转成白色 */
  filter: brightness(0) invert(1);
}

注：滤镜会作用于整个元素背景，后续如果改背景色需要调整参数。

方法3：内联SVG到伪元素 #

把SVG放到::before伪元素里，能直接通过CSS控制fill，灵活性更高：

input:checked {
  background: gray;
  border-color: gray;
  position: relative;
}

input:checked::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  /* 内联SVG，直接设置白色填充 */
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="white"/></svg>');
  background-size: cover;
}

/* 保留原切换按钮的滑块样式 */
input:checked::after {
  background: white;
  left: 70%;
}

你可以根据自己的需求选最适合的方法，三种都能实现把心形SVG的红色改成白色。

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