Question

在使用Nuxt.js的{{1}}应用程序中，我想为整个内容设置背景图像：

Vuetify.js

问题是内容没有垂直居中，因为图像占据了窗口的整个高度，因此我需要向下滚动才能看到内容。

是否可以将图像的高度设置为与视口高度完全相同的方式，以使我的内容垂直居中，并且窗口不会由于图像而向下滚动？

如果页面内容很长，我应该可以向下滚动并仍然看到设置为页面背景的图像

Github上的极简主义者demo code，以备您有时间运行它。

Answer 1

并不是真正的vue-javascript解决方案，而是CSS。下面的设置将导致整页背景图像和内容在没有滚动条的情况下垂直对齐。

编辑：使用静态资产

在您的模板中：

<v-content 
  :style="`background-image: url(${require('../assets/image.jpg')})`" 
  class="fill-height bg-image">
  <v-container justify-center fill-height>
    <v-row justify="center" align="center">
      <v-col cols="12" justify="center" style="border: 1px solid;">
        <nuxt />
      </v-col>
    </v-row>
  </v-container>
</v-content>

以您的风格：

<style>
 .bg-image {
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;
 }
</style>

Answer 2

高度：100vh？

vw相对于视口宽度的1％*
vh相对于视口高度的1％*

https://www.w3schools.com/cssref/css_units.asp

将背景图像高度设置为视口高度

2 个答案: