问题:Vuetify - 设置背景图片

在 Vuetify (Vue 组件超集)我想在背景中添加图像模式。

我试过了

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

但这不起作用,一些 vuetify 组件取消了这种样式。我想要一种优雅的方式来做到这一点,而不是直接在组件或 html 中插入样式。

有人遇到这个错误吗?我如何解决它?

解答

这是因为v-app替换了背景样式。

尝试这样的事情:

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

选择器选择了 Vuetify 的元素根(v-app)并强制改变背景样式。

或者,您可以使用根元素的名称来更改背景样式。例如:

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