2

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

我有一个#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 方式让链接随着图片中的正方形移动？

感谢您的提示和技巧。

问候， 马特

4

2 回答 2

1

使用您问题中的图像示例（防火墙阻止了 jsFiddle 中的图像），如果我了解您要查找的内容，则可以使用此 css：

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

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

于 2013-02-28T17:26:48.580 回答
1

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

position:absolute;
top:153px;
left:50%;
margin-left:63px;
于 2013-02-28T17:27:58.910 回答