html - 具有匹配水平导航的可缩放背景图像

Question

我试图让水平导航栏的位置与可缩放的背景图像“同步”，可以这么说。现在看起来导航是静态定位的，而图像在调整浏览器大小时自由移动。老实说，我不知道这是否真的有可能。这是网站主页:

www.nickducot.com/parker_new/

这是我目前得到的代码:

HTML: http://pastebin.com/TjJprLAv

CSS http://pastebin.com/jzYRQPt2

也许媒体查询/响应式设计会有所帮助？谢谢你!

Answer 1

下面是您可以执行此操作的一种粗略概述。它涉及将图像放在标记中，而不是作为背景。

HTML

<div class="image-wrapper">
    <img src="imagefile.jpg">
    <div id="menu">
        ... menu
    </div>
</div>

CSS

.image-wrapper {
    width: 85%;
    max-width: 700px;
    /* Note the above numbers are untested and plucked out of thin air for example purposes */
    position: relative;
    margin: 30px auto;
}
.image-wrapper img {
    max-width: 100%;
}
#menu {
    position: absolute;
    top: 100px;
    right: 0;
}

编辑:注意菜单实际上不会改变大小，但它会锚定到图像的特定点。您还需要尝试使用我用来实现所需效果的所有像素值。