0

我有一个随窗口调整大小的背景图像。我希望我的背景图片上的文字代表链接。我的想法是创建空且透明的 div 并将它们放置在背景图像中的单词上，当单击该 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 是实现这一点的最佳方式，我不介意使用它。

4

3 回答 3

0

我认为最好的方法是使用媒体查询，它有点拖累，但它会起作用

于 2013-02-09T20:52:36.663 回答
0

在我看来，你不需要 jquery。CSS 和百分比定位应该可以解决问题。尝试以下

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

正确定位您的 div 很棘手。但它应该工作

如果这不符合您的需求，您应该真正尝试做一个图像 Map 并使用 jquery 调整它的大小

于 2013-02-09T21:46:00.113 回答
0

您可以将图像设置在 div 中，您可以使用 z-index:1 将空 div 放在其顶部，因此您可以更好地控制两者

于 2013-02-09T22:27:30.087 回答