在背景位置上方的固定区域上链接：覆盖背景图像答案

【问题标题】：Link on a fixed area above a background-position:cover background image在背景位置上方的固定区域上链接：覆盖背景图像
【发布时间】：2013-01-29 00:12:33
【问题描述】：

我有this 登陆页面。我希望该电子邮件成为 mailto:info@domain.tld 的链接。

我尝试使用地图（在正文上使用地图 =“#mail”，然后地图名称 =“邮件”>）但它不起作用。我也尝试使用空白透明 png 图像（将 usemap 设置为），但链接不可点击。

如何实现电子邮件区域以在其上添加链接？当然，它应该适用于不同的分辨率。

【问题讨论】：

标签： html css map imagemap

【解决方案1】：

为什么不直接将电子邮件链接呈现为文本？看起来可以和 Open Sans 类似：http://www.google.com/webfonts/specimen/Open+Sans

【讨论】：

嗯，但我怎么能确定它就在那儿呢？ background-image 有一个 background-size:cover。
background-size:cover 似乎基于宽度。如果您使用基于 % 的右边距设置文本的位置，它应该与您的背景图像一起移动。

【解决方案2】：

你可以这样做：

添加 CSS：

div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}

a {
color: transparent;
}

添加 HTML：

<div id="mail"><a href="mailto:info@gioiellidisapone.it">info@gioiellidisapone.it</a></div>

演示：http://jsfiddle.net/fXats/

它并不完美，但也许已经足够好了。 :)

【讨论】：

Mario Vlad 和@robx 如果我调整窗口大小，文本会上升：img594.imageshack.us/img594/2561/gioiellidisapone.png
不为我移动。它很可能会移动，因为您想要一个流畅的布局。您的图像似乎也可以缩放，因此如果您将其设置为固定的宽度和高度，那么它应该不是问题。

【解决方案3】：

这就是我直接使用 Inspect 元素修改您的页面的方式，并且链接保持在图像文本的顶部。这是另一种选择，但具有固定的宽度和高度以支持电子邮件的定位。

<body>
<div style="
    width: 1430px;
    position: absolute;
    border: 1px solid #000;
    height: 700px;
    background-image: url(home2.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    display: inline-block;
"><a href="#" style="
    position: relative;
    top: 450px;
    right: 294px;
    display: inline-block;
    float: right;
">Info@gioiellidisapone.it</a>
</div>
</body>

【讨论】：