Question

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

我在这3张图片的中间也有一个徽标，在整个幻灯片放映过程中都会留在那里。

虽然显示了第一张图片（当网站加载时），但可以点击徽标图像（也具有按钮功能）并将您引导至另一个网站，但是当图像发生变化时，徽标仍然存在，然而点击的能力消失了......

所有人都非常感谢

这是我当前的代码

＆＃13;

$(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]);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

链接等接缝位于图像下方。

我能够解决这个问题，将链接元素添加到这些属性中：

position:absolute;
z-index:9

然后它应该工作。

修改

正如一个建议，看看这个例子，如果你第一次尝试使用html和css，它可能会很有用：

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

编码与背景图像

1 个答案: