更改背景图像不透明度，而不会用JS影响前景图像

Question

在动画中，我有一个可作为滑块的背景图像。第一个图像逐渐消失，另一个图像逐渐消失。我使用的是"不透明度 ='and'obacity- ='的方式。

但是问题是有一个前景图像，边缘顶部为-50％，这意味着它与滑块重叠。当背景滑块的不透明度逐渐改变前景图像的不透明度随肯定不需要的变化而变化。我如何避免这个问题。

事先感谢您的回答。

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;
	
}
#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>

Answer 1

在CSS上您可以将Selector #pic position设置为relative

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>