如何将图像放入跨度

Question

我使用以下CSS进行了切换：

.switch {
      position: relative;
      display: inline-block;
      width: 55px;
      height: 25px;
    }
    
    .switch input {display:none;}
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      border-radius: 34px;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 25px;
      width: 25px;
      left: 0px;
      bottom: 0px;
      background-color: white;
      border-radius: 50%;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(30px);
      -ms-transform: translateX(30px);
      transform: translateX(30px);
    }

<label class="switch">
    <input type="checkbox" checked>
    <span class="slider round"></span>
</label>

Span内需要有一个图像，当检查另一个图像时，它应如下所示：

需要使用CSS / React来实现。

Answer 1

我能够做出一些贡献：

* {
  font-family: 'Open Sans', 'Segoe UI';
}

.switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 25px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  left: 0px;
  bottom: 0px;
  background-image: url('https://i.imgur.com/J4GQTYs.png');
  background-size: contain;
  border-radius: 50%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
  background-image: url('https://i.imgur.com/Q0iHcOX.png');
}

input:checked ~ .unchecked,
input ~ .unchecked,
input ~ .checked {
  position: absolute;
  font-weight: 600;
  display: none;
  top: 1px;
}

.unchecked {
  right: 5px;
}
.checked {
  left: 5px;
}
input:checked ~ .checked,
input ~ .unchecked {
  display: block;
}

<label class="switch">
  <input type="checkbox" />
  <span class="slider round"></span>
  <span class="checked">FR</span>
  <span class="unchecked">EN</span>
</label>

Answer 2

您可以添加： # This code sorts the project files as they appear in the root directory # Generate a list of all .c & .h files in the current directory and sub directores. file( GLOB_RECURSE source_list RELATIVE "${CMAKE_CURRENT_SOURCE_DIR}" *.c *.h ) foreach(source IN LISTS source_list) get_filename_component(source_path "${source}" PATH) string(REPLACE "/" "\\" source_path_msvc "${source_path}") source_group("${source_path_msvc}" FILES "${source}") endforeach() message(STATUS "Tree reorganized") 用于显示图像，background-image: url(IMAGE);用于显示图像。仅使用background-size: contain;属性无效。

我将它们添加到您的示例中，以：background-image和slider:before {}来获得您想要的效果。如您所说，我使用了不同的图像，因为我找不到它那么快。但是当然，您可以只编辑您喜欢的图像的URL（请不要像本例中那样使用外部图像，而是将它们添加到您的服务器中）。

input:checked + .slider:before {}

.switch {
      position: relative;
      display: inline-block;
      width: 55px;
      height: 25px;
    }
    
    .switch input {display:none;}
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      border-radius: 34px;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 25px;
      width: 25px;
      left: 0px;
      bottom: 0px;
      background-color: white;
      border-radius: 50%;
      -webkit-transition: .2s;
      transition: .2s;
      background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/italy-512.png');
      background-size: contain;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(30px);
      -ms-transform: translateX(30px);
      transform: translateX(30px);
      background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/france-512.png');
      background-size: contain;
    }