html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0;
  height: 100vh;
  @include center;
}

.container2 { 
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 800px 90%;
    
  }
  .background-img {
    background-image: url('/resource/img/6d19ce25.jpg');
    /* background-size: cover;
    background-position: center; */
    /* background-size: contain;  */
    /* 关键属性 */
/* background-repeat: no-repeat;  */
/* 禁止重复 */
/* background-position: center; */
 /* 居中显示 */
*/
  }
  .foreground-img {
    background-image: url('/resource/img/858a5b5e.jpg');
    width: 50%;
    /* background-size: cover; */
    /* background-position: center; */
    /* background-size: contain;  */
    /* 关键属性 */
/* background-repeat: no-repeat; */
 /* 禁止重复 */
/* background-position: center; */
 /* 居中显示 */
  }
  
  .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background-color: rgba(242, 242, 242, 0.1);
    outline: none;
    margin: 0;
    transition: all .2s;
    @include center;
    &:hover {
      background-color: rgba(242, 242, 242, 0.1);
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 6px;
      height: 600px;
      background: white;
      cursor: pointer;
    }
    &::-moz-range-thumb {
      width: 6px;
      height: 600px;
      background: white;
      cursor: pointer;
    }
  }
  
  .slider-button {
    $size: 30px;
    pointer-events: none;
    position: absolute;
    width: $size;
    height: $size;
    border-radius: 50%;
    background-color: white;
    left: calc(50% - 18px);
    top: calc(50% - 18px);
    @include center;
    
    @mixin arrow-helper() {
      content: '';
      padding: 3px;
      display: inline-block;
      border: solid #5D5D5D;
      border-width: 0 2px 2px 0;
    }
    &:after {
      @include arrow-helper();
      transform: rotate(-45deg);
    }
    &:before {
      @include arrow-helper();
      transform: rotate(135deg);
    }
  }
}