本文介绍了如何将背景图片放在导航栏后面?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是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>
这篇关于如何将背景图片放在导航栏后面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!