视差

v-parallax 组件创建一个 3d 效果使图像显示比窗口滚动更慢。

用例

当用户滚动页面时，视差引起背景图像的滚动。

template

<template>
  <v-parallax src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"></v-parallax>
</template>

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

和内容一起使用

你也可以在视差中放置任何内容，这使您可以使用视差作为英雄图像。

template

<template>
  <v-parallax
    dark
    src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
  >
    <v-row
      align="center"
      justify="center"
    >
      <v-col class="text-center" cols="12">
        <h1 class="display-1 font-weight-thin mb-4">Vuetify.js</h1>
        <h4 class="subheading">Build your application today!</h4>
      </v-col>
    </v-row>
  </v-parallax>
</template>

自定义高度

你可以在视差上指定自定义高度。请记住，如果您的图像尺寸不合适，这可能会打破视差。

template

<template>
  <v-parallax
    height="300"
    src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
  ></v-parallax>
</template>