HTML / CSS：带背景图像的100％容器 - 可点击的链接应该放在图像上吗？

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;
}

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

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

然而问题是缩放浏览器窗口时背景图像正在移动（我希望它移动，所以这不是问题本身），但链接不是。

请参阅此实例： http://jsfiddle.net/KDag7/

是否有任何创意的CSS方法可以使链接与图像中的方块一起移动？

感谢您的窍门和技巧。

此致 马特

Answer 1

使用你问题中的图像示例（防火墙阻止了jsFiddle中的图像），如果我理解你在寻找什么，你可以使用这个css：

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

请参阅此jsFiddle：http://jsfiddle.net/KDag7/21/

Answer 2

这是更新fiddle。我将position:relative;添加到主图像并将position:absolute;添加到链接，以使其与其父级对齐。链接的定位可以通过以下方式实现：

position:absolute;
top:153px;
left:50%;
margin-left:63px;