HTML/CSS : 100% container with background image - clickable link should be positioned on image?

Question

我只是希望有任何创造性的解决方案来解决以下问题:

我有一个应用了背景图像的#containter

#container {
   height:400px;
   width:100%;
   background-image: url(http://cl.ly/NEvg/kv.jpg);
   background-repeat:no-repeat;
   background-size: 1000px;
   background-position:center 0px;
}

我的图像中有一个区域，我想在其中放置可点击的链接。

在此示例图像中，我想在绿色方 block 顶部放置一个不可见的 a#square ，这样当我仅单击该方 block 时，就会触发链接。

但是问题是缩放浏览器窗口时背景图像正在移动(我希望它移动，所以这不是问题本身)，但链接却没有。

查看这个实例: http://jsfiddle.net/KDag7/

有没有什么创意的CSS方式让链接随着图像中的方 block 移动？

感谢您的提示和技巧。

问候， 马特

Answer 1

使用您问题中的图像示例(防火墙阻止了 jsFiddle 中的图像)，如果我理解您要查找的内容，您可以使用以下 css:

 position:absolute;
 top:158px;
 left:50%;
 margin-left:64.5px;

查看这个jsFiddle:http://jsfiddle.net/KDag7/21/