html - 使用背景图像编码

Question

目前我有一个正在运行的幻灯片作为我的网站背景(3 张图片)

我在这 3 张图片的中间还有一个 Logo ，在整个幻灯片放映过程中都保留在那里。

当显示第一个图像(当网站加载时)时，可以单击 Logo 图像(也具有按钮功能)并将您定向到另一个网站，但是当图像发生变化时， Logo 仍然存在，然而点击的能力消失了......

非常感谢所有帮助

这是我当前的代码

---

$(document).ready(function() {
  var header = $('body');
  var backgrounds = new Array(
    'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
  );
  var current = 0;
  function nextBackground() {
    $('#mask').fadeTo(1000, 0.9, function() {
      current++;
      current = current % backgrounds.length;
      header.css('background-image', backgrounds[current]);
    })
    $('#mask').fadeTo(500, 0);
  }
  setInterval(nextBackground, 5000);
  header.css('background-image', backgrounds[0]);
});

body {
  -webkit-background-size: 1390px 700px;
  -moz-background-size: 1390px 700px;
  background-size: 1390px 700px;
}
h1 {
  font-size: 600%;
  color: white;
  margin-top: 0.5em;
}
h3 {
  color: white;
  margin-top: -50px;
}
.GFImage {
  margin-top: 65px;
  border: 0;
}
.Footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -8px;
  color: white;
  background: #151515;
  opacity: 0.8;
  text-align: center;
  vertical-align: middle;
  height: 7%;
}
#mask {
  width: 100%;
  height: 100%;
  background: #000000;
  top: 0;
  left: 0;
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
  <br>
  <h1>Welcome to GF</h1>
</center>
<center>
  <br>
  <h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
  <a href="Home Page .html">
    <img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
  </a>
</center>
<div class="Footer">
  <p>Copyright &COPY All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>

Answer 1

接缝就像链接在图像下方。

我能够通过向链接元素添加这些属性来解决这个问题:

position:absolute;
z-index:9 

然后它应该可以工作了。

编辑

作为一个建议，看看这个例子，如果你是第一次尝试使用 html 和 css，它可能会有用:

http://css-tricks.com/perfect-full-page-background-image/