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

Question

在动画中，我有一个用作 slider 的背景图像。第一张图像淡出，另一张图像淡入。我正在使用“opacity+=”和“opacity-=”方式。

但问题是有一个前景图像，其 margin-top 为 -50%，这意味着它与 slider 重叠。当背景 slider div 的不透明度逐渐变化时，前景图像的不透明度会随之变化，这肯定是不需要的。我怎样才能避免这个问题。

预先感谢您的回答。

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 中，您可以将选择器 #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>