Tailwind+Vue滚动视差

<template>
  <!-- 父容器必须指定relative -->
  <div class="relative h-[500vh]">
    <!-- 滚动视差背景容器 -->
    <div
      v-for="(image, index) in images"
      :key="`bg-parallax-${index}`"
      :class="['h-screen', 'bg-cover bg-center bg-fixed']"
      :style="{
        backgroundImage: `url(${image})`,
      }"
    />
  </div>
</template>

<script setup lang="ts">
  const images = [
    'https://picsum.photos/id/1000/1600/1600',
    'https://picsum.photos/id/1002/1600/1600',
    'https://picsum.photos/id/1021/1600/1600',
    'https://picsum.photos/id/1022/1600/1600',
    'https://picsum.photos/id/1023/1600/1600',
  ]
</script>

<template>
  <!-- 父容器必须指定relative -->
  <div class="relative h-[500vh]">
    <!-- 滚动视差背景容器 -->
    <div
      :class="[
        'bg-[url(https://picsum.photos/id/1023/1600/1600)]',
        'absolute inset-0 z-[-1]',
        'size-full bg-cover bg-center bg-fixed',
      ]"
    />
  </div>
</template>