Question

我有一个背景图片，随窗口重新调整大小。我希望背景图片上的文字代表链接。我的想法是创建空的和透明的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是实现此目的的最佳方式，我不介意使用它。

Answer 1

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

Answer 2

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

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

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

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

Answer 3

您可以在div中设置图像你可以使用z-index将空div放在它上面：1 所以你可以更好地控制两者

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

3 个答案: