每张幻灯片的背景图像都不会改变答案

【问题标题】：Background image doesn't change for each slide每张幻灯片的背景图像都不会改变
【发布时间】：2021-03-21 20:56:19
【问题描述】：

我正在为我的网站制作幻灯片，但是当我尝试在它们上放置一个链接时（所有 6 个都必须有一个链接，这是该网站的要求之一），我只是重复了相同的图像一遍又一遍地。当我删除 and 标签时，它不再发生了。

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 4368px;
  -webkit-animation: slide 25s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background-image: url(../site/fotos/muhammad\ ali.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(2) {
  background-image: url(../site/fotos/muhammad\ ali\ 2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(3) {
  background-image: url(../site/fotos/muhammad\ ali\ 3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(4) {
  background-image: url(../site/fotos/muhammad\ ali\ 4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(5) {
  background-image: url(../site/fotos/muhammad\ ali\ 5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(6) {
  background-image: url(../site/fotos/muhammad\ ali\ 6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

@-webkit-keyframes slide {
  10% {
    margin-left: 0px;
  }
  20% {
    margin-left: -728px;
  }
  28% {
    margin-left: -728px;
  }
  36% {
    margin-left: -1456px;
  }
  44% {
    margin-left: -1456px;
  }
  52% {
    margin-left: -2184px;
  }
  60% {
    margin-left: -2184px;
  }
  68% {
    margin-left: -2912px;
  }
  76% {
    margin-left: -2912px;
  }
  84% {
    margin-left: -3640px;
  }
  100% {
    margin-left: -3640px;
  }
}

<div id="slideshow">
  <div class="slide-wrapper">
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
  </div>
</div>

所以它只是不断重复同一张照片，即使我输入了不同的链接。

【问题讨论】：

将.slide类添加到标签，然后编辑css为：.slide:nth-child(N) div{...}
我的回答解决了你的问题吗？
是的，对不起，我忘了谢谢你，但它奏效了！谢谢
@Morrismario 如果它解决了问题，请确保将答案标记为已接受:)
会的！谢谢提醒

标签： html css css-selectors css-animations pseudo-class

【解决方案1】：

您为每个 slide 单独使用类幻灯片，所以这里发生的总是第一个孩子，您需要像下面这样更改 CSS

.slide-wrapper a:nth-child(1) .slide {
    background-image: url(https://wallpapercave.com/wp/1Odq43G.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-wrapper a:nth-child(2) .slide {
    background-image: url(https://cdn.wallpapersafari.com/48/5/jR1olt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-wrapper a:nth-child(3) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-wrapper a:nth-child(4) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.slide-wrapper a:nth-child(5) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.slide-wrapper a:nth-child(6) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

所以最好的做法是你上一堂像上面一样的普通课只需用此替换您的滑块图像 CSS

【讨论】：

20 分钟后我的答案完全正确吗？为什么不支持已经给出的答案？

【解决方案2】：

这是因为.slide 始终是a 链接的第一个（也是唯一一个）子链接，因此您需要改为：

a:nth-child(N) .slide  { background-image: url('linkimage'); }

片段

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 4368px;
  -webkit-animation: slide 25s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
  background-repeat: no-repeat;
  background-size: cover;
}

a:first-child .slide {
  background-image: url(https://picsum.photos/510/718?random=1);
}

a:nth-child(2) .slide {
  background-image: url(https://picsum.photos/510/718?random=2);
}

a:nth-child(3) .slide {
  background-image: url(https://picsum.photos/510/718?random=3);
}

a:nth-child(4) .slide {
  background-image: url(https://picsum.photos/510/718?random=4);
}

a:nth-child(5) .slide {
  background-image: url(https://picsum.photos/510/718?random=5);
}

a:nth-child(6) .slide {
  background-image: url(https://picsum.photos/510/718?random=6);
}

@-webkit-keyframes slide {
  10% {
    margin-left: 0px;
  }
  20% {
    margin-left: -728px;
  }
  28% {
    margin-left: -728px;
  }
  36% {
    margin-left: -1456px;
  }
  44% {
    margin-left: -1456px;
  }
  52% {
    margin-left: -2184px;
  }
  60% {
    margin-left: -2184px;
  }
  68% {
    margin-left: -2912px;
  }
  76% {
    margin-left: -2912px;
  }
  84% {
    margin-left: -3640px;
  }
  100% {
    margin-left: -3640px;
  }
}

<div id="slideshow">
  <div class="slide-wrapper">
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
  </div>
</div>

【讨论】：