如何将背景图片放在导航栏后面？ [英] How to put a background image behind the nav bar?

问题描述

我是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>

推荐答案

如果您希望拥有动态背景图像，则需要在模板中执行此操作(据我所知，可能在Vue3的style部分可以实现，但在Vue2中不能实现)。

此答案可能有帮助：https://stackoverflow.com/a/66365980/8816585

基本上就是这样

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

这篇关于如何将背景图片放在导航栏后面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！