css - 如何将图像添加到自定义复选框的背面

我在Codepen上找到了一个非常干净的自定义复选框，并刚刚更新了一个项目以使用它。现在，我在表单的不同部分使用了不同的背景色，但我想仅将背景作为图标而不是纯色

注释掉的东西不起作用

.label-switch {
  display: inline-block;
  position: relative;
}

.label-switch::before,
.label-switch::after {
  content: "";
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
}

.label-switch::before {
  width: 3em;
  height: 1em;
  border: 1px solid #757575;
  border-radius: 4em;
  background: #888888;
}

.label-switch::after {
  position: absolute;
  left: 0;
  top: -20%;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #757575;
  border-radius: 4em;
  background: #ffffff;
}

.input-switch:checked~.label-switch::before {
  background: #00a900;
  border-color: #008e00;
}

.input-switch:checked~.label-switch::after {
  left: unset;
  right: 0;
  background: #00ce00;
  /*background-image:(url(http://pngimg.com/uploads/pokeball/pokeball_PNG8.png);*/
  /*background: url(http://pngimg.com/uploads/pokeball/pokeball_PNG8.png);*/
  border-color: #009a00;
}

<input class='input-switch' type="checkbox" id="demo" />
<label class="label-switch" for="demo"></label>
<span class="info-text"></span>

最佳答案

您所做的所有操作都是正确的，只是设置了background-position和background-size所需的背景图像，如果您在我的代码段中切换了复选框，您应该会看到预期的背景图案。

.label-switch{
    display: inline-block;
    position: relative;
 }

.label-switch::before, .label-switch::after{
     content: "";
     display: inline-block;
     cursor: pointer;
     transition: all 0.5s;
}

.label-switch::before {
     width: 3em;
height: 1em;
border: 1px solid #757575;
border-radius: 4em;
background: #888888;
}

.label-switch::after {
     position: absolute;
    left: 0;
    top: -20%;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #757575;
    border-radius: 4em;
    background: #ffffff;
}

.input-switch:checked ~ .label-switch::before {
    background: #00a900;
    border-color: #008e00;
}

.input-switch:checked ~ .label-switch::after {
    left: unset;
    right: 0;
    background: #00ce00;
    background-image:url(http://pngimg.com/uploads/pokeball/pokeball_PNG8.png);
    background-size:contain;
    background-position:center;
    border-color: #009a00;
}

<input class='input-switch' type="checkbox" id="demo"/>
<label class="label-switch" for="demo"></label>
<span class="info-text"></span>

关于css - 如何将图像添加到自定义复选框的背面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57419757/