如何更改 slider 图像

Question

如何在 slider 中插入太阳和月亮的图像（或任何两个图像），以便在单击它时会根据启用暗/亮模式的时间更改图像？ 我不确定如何 go 关于这个。 我想保留 slider，因为我喜欢过渡，但我希望里面的图像在启用 lightmode 时显示月亮，以允许用户在暗模式下单击它，在暗模式下单击它也是如此。

HTML：

<main id="main">
  <label class="switch">
    <input type="checkbox" onclick="darkLight()" id="checkBox" >
    <span class="slider"></span>
  </label>
</main>

CSS：

body {
  margin: 0;
  padding: 0;
}
main {
  height: 100vh;
  width: 100vw;
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main p {
  align-self: center;
  font-family: sans-serif;
  transition: color 0.3s ease;
}
/*TOGGLE COLORS*/
.dark {
  background: #545454;
  color: #efefef;
}
p {
  background: none !important;
}
/*SWITCH*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  align-self: center;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider {
  border-radius: 30px;
}

.slider:before {
  border-radius: 50%;
}

JS：

$('#main').toggleClass(localStorage.toggled);

function darkLight() {
  /*DARK CLASS*/
  if (localStorage.toggled != 'dark') {
    $('#main, p').toggleClass('dark', true);
    localStorage.toggled = "dark";
     
  } else {
    $('#main, p').toggleClass('dark', false);
    localStorage.toggled = "";
  }
}

/*Add 'checked' property to input if background == dark*/
if ($('main').hasClass('dark')) {
   $( '#checkBox' ).prop( "checked", true )
} else {
  $( '#checkBox' ).prop( "checked", false )
}

Answer 1

可以使用 CSS 将背景图像放在 slider 按钮内。 对于选择器.slider:before和input:checked +.slider:before ，您需要图像 URL 。 这是一个带有一些imgur URL 的示例，但我会使用您自己的 URL，以防止将来可能删除链接。

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; align-self: center; }.switch input { opacity: 0; width: 0; height: 0; }.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; }.slider:before { background-image: url("https://i.imgur.com/6NVOxEL.png"); background-size: contain; background-repeat: no-repeat; position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; /*background-color: white;*/ -webkit-transition: 0.4s; transition: 0.4s; } input:checked +.slider { background-color: #2196f3; } input:checked +.slider:before { background-image: url("https://i.imgur.com/L8cR8EK.png"); background-size: contain; background-repeat: no-repeat; -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider { border-radius: 30px; }.slider:before { border-radius: 50%; }

 <label class="switch"> <input type="checkbox" id="checkBox"> <span class="slider"> </span> </label>