定位调整窗口大小时将移动的div

Question

我有一个背景图像，它会随窗口重新调整大小。我希望我的背景图片上的文字代表链接。我的想法是创建空的透明div，并将它们放置在背景图像中的单词上，当单击该div时，相应的链接将被激活。

我的潜水器定位有问题。当窗口重新调整大小时，我似乎无法让它们与背景图像中的单词保持对齐。

HTML:

<div id="wrapper">
    <div id="bespoke">
        I want this to always be aligned with "Bespoke" in the background image
    </div>
</div>

CSS：

html { 
    background: url(main.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
}
#wrapper {
    position: relative;
    top: auto;
    margin: auto;
    text-align: center;
    height: auto;
}
#bespoke {
}

演示：

http://jsfiddle.net/DzC3V/1/

注意：如果jQuery是实现这一点的最佳方法，我不介意使用它。

Answer 1

在我看来，您不需要jquery。CSS和带有百分比的定位就可以了。尝试以下

#yourObeject {
     position: absolute;
     top: 30%;
     left: 30%;
}

正确定位div很难。但它应该可以

如果这不符合您的需要，您应该尝试制作一个图像映射，并使用jquery 调整其大小

Answer 2

我认为最好的方法是使用媒体查询，这有点拖沓，但它可以在中工作

Answer 3

您可以在div中设置图像您可以使用z索引将空div放在上面：1所以你对两个都有更好的控制