使用js更改背景图像不透明度而不影响前景图像

let current = 1;

let inInt, outInt;

function slide() {
  let slider = document.getElementById("slider");
  let limit = 3;

  function fadeIn() {
    slider.style.opacity = Number(slider.style.opacity) + .001
    if (slider.style.opacity > 1) {
      clearInterval(inInt);
    }
  }

  function fadeOut() {
    slider.style.opacity = Number(slider.style.opacity) - .05;
    if (slider.style.opacity < 0) {
      clearInterval(outInt);
    }
  }

  function change() {
    slider.style.opacity = 1;
    outInt = setInterval(fadeOut, 100);

    setTimeout(() => {
      clearInterval(outInt);
      outInt = "";
      current++;
      if (current > 3) {
        current = 1;
      }

      for (x = 1; x < limit; x++) {
        document.getElementById("sli" + x).style.display = "none";
      }
      document.getElementById("sli" + current).style.display = "block";
      slider.style.opacity = 0;
      inInt = setInterval(fadeIn, 5);
    }, 3000);
  }

  let timer = setInterval(change, 10000);

}
slide();

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

#header {
  height: 70vh;
  padding: 0;
}

#slider {
  padding: 0;
  height: 70vh;
  overflow: hidden;
  z-index: -100;
}

#slider img {
  width: 100%;
  display: inline-block;
}

#pic {
  margin-top: -12vh;
  position:relative;
}

#pic img {
  height: 30vh;
  border-radius: 40%;
  margin-left: 5%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  vertical-align: -8vh;
  background: #000;
}

#name {
  display: inline-block;
  font-size: 2vw;
  margin-top: 2vh;
  font-family: 'Aldrich';
  color: #628d94;
}

#nav {
  font-family: 'Aldrich';
  color: #628d94;
  display: inline-flex;
  font-size: 2vw;
  margin-left: 25%;
  justify-content: space-between;
}

.navItem {
  font-size: 1.5vw;
  border-bottom: 3px solid #a2a2a2;
  margin-left: 30px;
}

.navItem:hover {
  border-bottom: 5px solid #fff;
  color: #eee;
}

a {
  color: inherit;
  text-decoration: none;
}

<div id="header" class="col-12 col-s-12">
  <div id="slider" class="col-12 col-s-12">
    <img src="https://images.golos.io/DQmbSzfL8pRHneykhTuxCQCyAzC7gAD7knSyizP2swmc3zD/creative_facebook_timeline_covers_023.jpg" alt="Slider image 1" id="sli1" style="display:inline-block" />
    <img src="https://www.incimages.com/uploaded_files/image/970x450/getty_509107562_2000133320009280346_351827.jpg" alt="Slider image 2" id="sli2" />
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrXTDeYeeCx_DCvAirWmdpBNkHoZPslXTNhJzo2KP6PcE6-Mrq" alt="Slider image 3" id="sli3" />
  </div>
  <div id="pic">
    <img src="https://www.cobdoglaps.sa.edu.au/wp-content/uploads/2017/11/placeholder-profile-sq.jpg" alt="" />
    <div id="name">
      Abdullah Al Monsur
    </div>
    <div id="nav">
      <a href="">
        <div class="navItem">Details</div>
      </a>
      <a href="">
        <div class="navItem">Extra-Curricular</div>
      </a>
      <a href="">
        <div class="navItem">Contact</div>
      </a>
    </div>
  </div>
</div>