如何通过CSS修改Bootstrap开关（switch）组件主容器的背景图片

架构老林

2026-10-3

要实现开关主容器（轨道）的背景图片修改，可通过CSS多背景叠层语法完成，不会影响你已经实现的滑块背景图效果，只需调整你的样式代码即可：

<style>
.form-switch .form-check-input {
  width: 6em !important;
  height: 1.5em !important;
  background-color: transparent !important; /* 清除Bootstrap默认轨道背景色，避免遮挡自定义背景 */
  background-repeat: no-repeat !important;
  border: none !important; /* 可选：移除默认边框，也可保留自定义边框样式 */
  /* 多背景顺序：滑块背景图在前（上层），轨道未选中背景图在后（下层），替换第二个url为你的轨道未选中背景图地址即可 */
  background-image: url(https://i.pinimg.com/736x/2a/89/fe/2a89fee1a635745cec680e88efa49bcc.jpg), url(这里替换为你的轨道未选中背景图地址) !important;
  /* 分别设置两个背景的尺寸：滑块大小匹配开关高度留边，轨道背景占满整个容器 */
  background-size: calc(1.5em - 4px) calc(1.5em - 4px), 100% 100% !important;
  /* 未选中状态：滑块靠左对齐，轨道背景正常填充 */
  background-position: left 2px center, 0 0 !important;
}

.form-switch .form-check-input:checked {
  /* 选中状态：替换滑块图和轨道选中背景图，替换第二个url为你的轨道选中背景图地址即可 */
  background-image: url(https://img1.pnghut.com/12/19/25/wAke6Snm2D/icon-photography-digital-media-social-networking-service-mark-zuckerberg.jpg), url(这里替换为你的轨道选中背景图地址) !important;
  /* 选中状态：滑块靠右对齐，轨道背景正常填充 */
  background-position: right 2px center, 0 0 !important;
}
</style>