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

时间:2013-02-09 19:34:38

标签: html css

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

3 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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