Question

我搜索了几个小时试图找到一个解决方案，用于创建可点击的身体背景图像。

我设法在stackoverflow上找到了一些类似的问题/答案，但我不知道如何应用它们。

到目前为止，我认为下面的代码可能有所帮助，但我似乎无法理解如何在我的网站上使用它。

$('body').click(function(e){
    if (e.target === this) {
        window.location = "link.html"
    }
});

有人可以解释我如何才能在007soccerpicks.com上使用它？除了作为网站内容区域的<div id="container">之外，我需要可点击的正文背景图片。

非常感谢！

Answer 1

如果包含在body元素内，您设置的脚本将单击整个文档。解决这个问题的一种方法是在后台使用固定元素，在另一个包装器中使用主体逻辑。

<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>

<style>
.body-clickable 
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>

<script>
$('.body-clickable').click(function(e){
    if (e.target === this) {
        window.location = "link.html"
    }
});
</script>

你也可以避免使用脚本，实际上只是让'body-clickable'成为一个链接。

Answer 2

#box-link { 
		position: absolute; 
		top: 8px; 
		left: 20px; 
		width: 83px; 
		height: 83px; 
		background-color: transparent; 
		border: 1px solid yellow; }	
.box1 { 
		position: relative; 
		margin: 20px 0 20px 40px; 
		padding: 5px 0; width: 300px; 
		height: 300px; 
		background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg'); 
		background-repeat: no-repeat; 
		}

<body>
    <div class="box1">
		<a id="box-link" href="https://www.facebook.com/"></a>
		<p>The background of this box is an image.</p>
		</div>
</body>

身体背景图像可点击

2 个答案: