<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我希望在主页上的图片上方放置一个顶部导航。当您单击其中一个导航按钮时，它会打开一个包含其他导航项的抽屉，并将其余内容向下推。这将需要拆分抽屉导航打开的主页背景图像。
您可以在此处查看我正在谈论的确切内容的工作示例:https://squareup.com/ .
单击“业务类型”或“产品”以查看所需的效果。
我怎样才能做类似的事情。有没有人有任何指示或事情要调查？
如有任何帮助或指导，我们将不胜感激。
谢谢，
脑筋急转弯
最佳答案
您需要创建 3 个 div，一个用于菜单，一个用于隐藏内容，一个位于其正下方，我们称之为“横幅”。
在菜单和“横幅”上设置相同的背景图像。然后使用 css background-postion 属性，将菜单设置为 background-postion: top; 并且横幅应该是 background-position: negative HeightOfYourMenu;
如果你对隐藏内容使用jQuery的.slideDown方法，你应该会得到你想要的效果。
所以像这样:
.menu {
background-image: url(YourBgPath);
background-position: top;
height: 100px;
}
.hidden-content {
display: none;
}
.banner {
background-image: url(YourBgPath);
background-position: 0 -100px;
}
关于jquery - 使用顶部抽屉导航拆分图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35464090/