我目前遵循 vuetify SPA 示例,我的 v-parallax 尚未完全准备好用于 vue-cli v3。 当前结构在顶部显示 v-toolbar,带有 v-navigation-drawerr,然后是显示不同 View 的 v-content...
App.vue
<template>
<v-app light>
<div id="app">
<v-navigation-drawer absolute class="hidden-sm-and-up" v-model="sideNav">
<v-toolbar flat>
....
</v-toolbar>
<v-list>
....
</v-list>
</v-navigation-drawer>
<v-toolbar>
....
</v-toolbar>
<v-content>
<router-view/>
</v-content>
</div>
</v-app>
</template>
Section1.vue
<div class="section1">
<section>
<div class="parallax">
<v-layout
column
align-center
justify-center
class="white--text"
>
<img src="../assets/images/vuetify.png" alt="Vuetify.js" height="200">
</v-layout>
</div>
</section>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.parallax {
background-image: url('../assets/images/hero.jpeg');
background-size:cover;
/* Set a specific height */
min-height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
我想在视差背景图像上显示 v-toolbar,这意味着它应该是透明的,背景图像应该显示在 v-toolbar 下方的顶部
目前可以使用 CSS 还是我不应该使用 vuetify 并返回到简单的 html/css 模板编码?
感谢您的反馈和建议
最佳答案
为什么抽屉导航中有第二个工具栏?我会删除它。
使工具栏透明非常简单:
<v-toolbar flat color="transparent">
要将背景移动到顶部,只需移除所有父 div 的内边距。例如,您可以像这样 class="pa-0"
或 class="ma-0 pa-0"
来删除边距和填充。您很可能会在 App.vue 中执行此操作:
<template>
<v-app>
<Toolbar/>
<Home class="pa-0"/>
<MyFooter/>
</v-app>
</template>
关于css - Vuetify CSS 布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49884102/