Vuetify - 设置背景图片答案

【问题标题】：Vuetify - Set background imgVuetify - 设置背景图片
【发布时间】：2020-07-03 22:46:09
【问题描述】：

在Vuetify（Vue组件超集）我想在背景中添加一个图像图案。

我试过了

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

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

有人遇到过这个错误吗？我该如何解决？

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

这是因为 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>

【讨论】：

我尝试了这两种方法，但没有奏效。如果我只放一个颜色有效，但图像没有。
可能你的图片有问题。我用这个补丁创建了一个最小的例子。请尝试在您的计算机上运行。

【解决方案2】：

在你的 v-container 上放一个类

<template>
    <v-container class="hero">
    </v-container>
</template>

<style scoped>
.hero {
  background: url('../assets/yourImage.jpg');
  background-size: cover;
  height: 100vh;
}
</style>

【讨论】：