在类星体中设置不覆盖卡片的背景图像答案

【问题标题】：Setting a background image in quasar that don't overlay the card在类星体中设置不覆盖卡片的背景图像
【发布时间】：2020-05-18 18:48:20
【问题描述】：

我如何在我的应用中设置背景图片，因为现在它只是覆盖了我创建的卡片？

我希望我的卡片位于背景图片之上。

我也尝试使用 z-index，但它没有改变任何东西

  <template>
  <div class="q-pa-md">
    <!-- <q-img src="../../assets/bg2.png" class="fullscreen" /> -->
    <q-layout class="vertical-center">
      <q-card class="q-pa-lg">
        <q-img
          src="../../assets/edge_logo.png"
          native-context-menu
          alt="Logo"
          basic
          sizes="(max-width: 320px) 280px"
        />
        <q-form>
          <q-input
            filled
            outlined
            color="green"
            v-model="email"
            label="Email"
            lazy-rules
            :rules="emailRules"
          />
          <q-input
            filled
            outlined
            color="green"
            v-model="password"
            label="Password"
            lazy-rules
            :rules="emailRules"
            type="password"
          />
          <q-card-actions>
            <q-btn color="green" @click="loginToFB">Login</q-btn>
          </q-card-actions>
        </q-form>
      </q-card>
    </q-layout>
  </div>
</template>

下面是没有背景的图片

这是有背景的图片，你可以看到卡片不见了。

【问题讨论】：

标签： css vue.js sass quasar-framework quasar

【解决方案1】：

使用类在第一个 div 上设置背景图像。

示例 -

<template>
  <div class="q-pa-md bg-image">
    <!-- <q-img src="../../assets/bg2.png" class="fullscreen" /> -->
    <q-layout class="vertical-center ">
      <q-card class="q-pa-lg">
        <q-img
          src="../../assets/edge_logo.png"
          native-context-menu
          alt="Logo"
          basic
          style="height: 120px;max-width: 120px"
        />
        <q-form>
          <q-input
            filled
            outlined
            color="green"
            v-model="email"
            label="Email"
            lazy-rules
          />
          <q-input
            filled
            outlined
            color="green"
            v-model="password"
            label="Password"
            lazy-rules
            type="password"
          />
          <q-card-actions>
            <q-btn color="green" @click="loginToFB">Login</q-btn>
          </q-card-actions>
        </q-form>
      </q-card>
    </q-layout>
  </div>
</template>

<script>
    export default {
        name: 'MyLayout',

        data() {
            return {
                password: '',
                email: ''
            }
        },
        methods: {
            loginToFB() {

            }
        }
    }
</script>
<style>

  .bg-image {
    background-image: url(https://cdn.quasar.dev/img/mountains.jpg);
    background-repeat: no-repeat;
    background-size: contain;
  }


</style>

【讨论】：