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

我有一个背景图片，用窗口重新调整大小。我想要我的背景图片上的文字来表示链接。我的想法是创建空白透明的div，并将它们放在背景图片中的单词上，当单击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是完成这一任务的最好方式，我不介意使用它。

来源

2013-02-09 Jon

标准图像映射有什么问题吗？他们不扩展吗？ – cimmanon 2013-02-09 20:04:11

如果在重新调整窗口大小时重新调整图像大小，图像映射是否会工作？ – Jon 2013-02-09 20:34:20

在我看来，你将不再需要jQuery的。 CSS和定位与百分比应该做的伎俩。请尝试以下

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

它的棘手正确放置您的股利。但它应该工作

如果这不适合你的需求，你应该尝试做一个图像地图和使用jQuery

来源

2013-02-09 21:46:00 kramsee

仅仅用CSS就行 - 需要jQuery。但是你的回答是最好的。 – Jon 2013-02-13 16:20:07

我认为要做到这一点，最好的办法是使用媒体查询，它有点拖累，但它会工作

来源

2013-02-09 20:52:36 iConnor

调整它可以在一个div 设定的图像，并可以把空div上使用z-index：1 因此，你有更好的控制

来源

2013-02-09 22:27:30 lotav

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

回答

相关问题