Установка фонового изображения в квазаре, который не перекрывает карту - PullRequest
Новая
       55

Установка фонового изображения в квазаре, который не перекрывает карту

0 голосов
/ 03 февраля 2020

Как я могу установить фоновое изображение в моем приложении, потому что сейчас оно просто накладывается на созданную мной карту?

Я хочу, чтобы моя карта находилась поверх фонового изображения.

Я также пытался использовать 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>

Ниже изображение без фона

image

и это изображение с фоном, как вы можете видеть, карта исчезла.

image

1 Ответ

0 голосов
/ 03 февраля 2020

Установить фоновое изображение на первый 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>
...