Vuetify CSS布局问题

Question

我目前遵循vuetify SPA示例，v-parallax还没有为vue-cli v3做好准备。当前结构在顶部显示v工具栏，使用v-navigation-drawerr，然后显示不同视图的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工具栏，这意味着它应该是透明的，背景图像应该显示在v工具栏下方的顶部

它目前可能与CSS或我不应该使用vuetify并回到简单的html / css模板编码？

感谢您的反馈和建议

Answer 1

为什么导航抽屉中有第二个工具栏？我会删除它。

使工具栏透明非常简单：

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