我有一个使用全屏背景图片的网站登录页面。我需要图像的“进入站点”部分可以点击进入主站点。我尝试使用图像映射代码,但尺寸在较大的显示器上无法正常工作。有没有办法使全屏背景图像包含可点击的超链接,以便他们可以点击页面上的任意位置进入?这是我当前的 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;
}
最佳答案
对于整页背景,使用 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%;
}
更新: background-size 不适用于 IE8 及更低版本
关于html - 需要一个全屏背景图像来包含超链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20829715/