目前我有一个正在运行的幻灯片作为我的网站背景(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 © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
最佳答案
接缝就像链接在图像下方。
我能够通过向链接元素添加这些属性来解决这个问题:
position:absolute;
z-index:9
然后它应该可以工作了。
编辑
作为一个建议,看看这个例子,如果你是第一次尝试使用 html 和 css,它可能会有用:
关于html - 使用背景图像编码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28501308/