Question

我有一个使用全屏背景图片的网站的目标网页。我需要图像的“输入网站”部分可以点击进入主站点。我尝试使用图像映射代码，但尺寸在较大的显示器上无法正常工作。有没有办法让全屏背景图像包含可点击的超链接，以便他们可以点击页面上的任何位置进入？这是我目前的HTML：

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<img alt="full screen background image" src="Dock-BG-ES.gif" id="full-screen-background-image">

<p>
<img border="0" src="map.gif" width="1440" height="813" usemap="#entermap">

<map name="entermap">
<area shape="rect" coords="730,560,1200,815" alt="Enter Site" href="welcome.htm">
</map>
</p>

</body>

和CSS：

html, body {
overflow: hidden;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

Answer 1

对于整页背景，请使用background-size css属性：

 body {
   background:url('') no-repeat center center fixed ;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;   
 }

然后链接

a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

更新： 后台大小不适用于IE8及更低版本

Answer 2

供全场使用

html, body {
   background:url(/Dock-BG-ES.gif) repeat top left;
   overflow: hidden;
   height: 100%;
   width: 100%;
   padding: 0;
   margin: 0;
}

使用onclick事件使整个部分可点击

<body>
<div onclick="http://www.google.com" width="100%" height="100%"></div>
</body>

Answer 3

您最好的选择是使整个图像可以点击。您可以尝试使用div并使用position：absolute将其放置在img上。左侧和顶部的％值。但是，除非您的“输入网站”位于图像的一角，否则屏幕的不同侧面比率将会失败。

需要全屏背景图像才能包含超链接

3 个答案: