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;