2017-02-17 29 views
0

我与GIF背景的网站,点击屏幕上的任何位置后,我想转到另一个网站(像softlaunch)点击背景上的任何位置后转到其他网站?

我的HTML和CSS

body { 
 
    background: url(main.gif) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-color: #000000; 
 
    width: 100%; 
 
    height: 100%; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="shortcut icon" type="image/png" href="fav.png" /> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
    <title>@nosleep</title> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

+0

是您无法让图片显示您喜欢的方式或您是否需要应用点击事件的帮助? –

回答

0

您可以通过添加一个填充屏幕的元素来避免javascript;是这样的:

body { 
 
    background: hsl(0,0%,50%); 
 
} 
 
a#fill{ 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    height:100vh; 
 
    width:100vw; 
 
    color: color:hsl(0,0%,80%); 
 
    text-align: center; 
 
    padding-top: 45vh; 
 
    transition: .3s background-color, .3s color; 
 
} 
 
a#fill:hover { 
 
    background-color: hsla(0,0%,0%,.3); 
 
    color: white; 
 
}
<a href="https://jsfiddle.net/" id="fill">click to visit jsfiddle</a>

如果你愿意,你也可以用普通的JavaScript做到这一点,如果你是这样的倾向:

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementsByTagName('body')[0].addEventListener('click',function(){ 
    window.location = 'http://developer.mozilla.org'; 
    }); 
}); 

但Ÿ

0

这里是一些代码来处理您的点击事件:

<script> 
    $(document).ready(function() { 
     $("body").on("click", function() { location.href = 'http://developer.mozilla.org'; }); 
    }); 
</script> 

Hope t他的帮助。