html - 需要一个全屏背景图像来包含超链接

标签 html css hyperlink background-image

我有一个使用全屏背景图片的网站登录页面。我需要图像的“进入站点”部分可以点击进入主站点。我尝试使用图像映射代码,但尺寸在较大的显示器上无法正常工作。有没有办法使全屏背景图像包含可点击的超链接,以便他们可以点击页面上的任意位置进入?这是我当前的 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/

相关文章:

javascript - jQuery scrollTop 并关注元素

css - 如何在列表元素中居中文本

javascript - 如何制作动画多色进度条?

c# - 拦截用户在 WebView (.NET Maui) 中点击的所有链接

html - 带有位置固定按钮的溢出滚动框

javascript - 更改 owl-carousel 中图像的宽度

javascript - 在 Dynamics CRM Online 中获取 HTML Web 资源的值(value)

html - ID 未对齐中心 CSS [outlook.com]

html - 嵌入链接到另一个站点的横幅

php include, index.php 和 CSS 文件问题