Vuetify - Установить фон img - PullRequest
Новая
       3

Vuetify - Установить фон img

0 голосов
/ 23 марта 2020

In Vuetify (Vue супер набор компонентов) Я хочу добавить шаблон изображения в фоновом режиме.

Я пробовал 

body {
    background: url("/images/background.png") no-repeat center center fixed;
    background-size: cover;
}

Но это не работает, некоторые компоненты vuetify отменяют этот стиль. Мне нужен элегантный способ сделать это, а не вставлять стили непосредственно в компоненты или html.

Кто-нибудь сталкивался с этой ошибкой? Как мне это исправить?

1 Ответ

0 голосов
/ 23 марта 2020

Это происходит потому, что v-app заменяет стиль фона.

Попробуйте что-то подобное: 

div[data-app='true'] {
  background: url('/images/background.png') no-repeat center center fixed !important;
  background-size: cover;
}

Селектор выбрал элемент root из Vuetify (v-app ) и принудительно измените стиль фона.

Или вы можете использовать имя элемента root, чтобы изменить стиль фона. Например: 

#app {
  background: url('/images/background.png') no-repeat center center fixed !important;
  background-size: cover;
}

PS: посмотрите минимальный пример с этим патчем: 

<template>
  <div>
    <v-app>
      <v-content class="pa-4">
        <v-data-table :headers="headers" :items="items" />
      </v-content>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    items: [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
    ],
    headers: [
      { text: 'Id', value: 'id' },
      { text: 'Name', value: 'name' },
    ],
  }),
};
</script>

<style>
#app {
  background: url('https://ohlaladani.com.br/wp-content/uploads/wallpaper-OHLALADANI_DESKTOP_WALLPAPERS_AVENTURA-2.jpg')
    no-repeat center center fixed !important;
  background-size: cover;
}
</style>
...