如何为每张图片添加一个 url 链接？

问题描述

嗨，我只是从网站上复制了这个简单的 CSS 滑块代码，谁能告诉我如何在此滑块代码中为每个图像添加 url 链接？我试图为每个图像添加“a href”，但它不起作用我想知道为什么...:(非常感谢您的帮助~

.slider {
  max-width: 1200px;
  height: 800px;
  
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(https://media-cdn.tripadvisor.com/media/photo-o/13/9f/39/d1/cape-view-clifton.jpg)no-repeat center;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(https://media-cdn.tripadvisor.com/media/photo-o/13/9f/39/e3/cape-view-clifton.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(https://media-cdn.tripadvisor.com/media/photo-o/13/9f/39/db/outside-sun-deck.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

<div class="slider">
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

解决方法

这取决于您想对链接做什么。

鉴于问题中的代码，可以将作为图像的 div 更改为（锚）标签 - 它们将采用相同的背景图像和尺寸。

在实际情况下，点击的链接可能会打开一个新窗口，但请注意 SO 代码段系统不允许这样做，因此在此代码段中您可以看到指针发生变化，表明存在链接，但它没有哪儿也不去。

.slider {
  max-width: 1200px;
  height: 800px;
  
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(https://media-cdn.tripadvisor.com/media/photo-o/13/9f/39/d1/cape-view-clifton.jpg)no-repeat center;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(https://media-cdn.tripadvisor.com/media/photo-o/13/9f/39/e3/cape-view-clifton.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(https://media-cdn.tripadvisor.com/media/photo-o/13/9f/39/db/outside-sun-deck.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

<div class="slider">
  <a href="#" target="_blank" class="slide1"></a>
  <a href="#" target="_blank" class="slide2"></a>
  <a href="#" target="_blank" class="slide3"></a>
</div>