如何在导航栏后面放置背景图片？

Question

我是 Nuxt Js 的新手，无法将背景放在导航栏后面。

Nav.vue

<style scoped>
.padding {
    padding: 5px;
    background-color: #082F4D
}
.navbar {
    position: absolute;
    overflow: hidden;
}
.navbar a {
    float: left;
}
</style>

index.vue

<div class="container">
  <FirstPageFirstSection />
</div>

...
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

FirstPageFirstSection.vue

<style scoped>
.Hero {
  background-image: url("~/assets/logo/xx.jpeg");
  min-height:300px;
    /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: flex-start;
}
</style>

Answer 1

如果您想要动态背景图片，则需要在模板中执行此操作（据我所知，可能在 Vue3 的 style 部分中可行，但在 Vue2 中不可行）。

这个答案可能会有所帮助：https://stackoverflow.com/a/66365980/8816585

差不多就是这个

<div :style="{ backgroundImage: `url(${require('~/assets/logo/xx.jpeg')})`}"></div>