Vuetify CSS 布局问题

Question

我目前正在关注 vuetify SPA 示例，我的 v-parallax 尚未完全准备好用于 vue-cli v3。当前结构在顶部显示 v-toolbar，带有 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-toolbar，这意味着它应该是透明的，背景图像应该显示在 v-toolbar 下方的顶部

目前可以使用 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>

Vuetify CSS 布局问题

Vuetify CSS layout issue

css

vue.js

vuetify.js