2

我正在尝试在不导入 React 和 ReactDom 的情况下创建视差效果。我正在使用基本的 html 和 css 来构建这个视差。我别无选择，只能使用：

import Image from 'next/image'

如何创建这种视差效果？这是我的代码：页面文件夹-> index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image'

export default function Home() {
  return (
    <div className={styles.container}>

      <div className={styles.section}>

      <Head>
        <title>Parallax Effect</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Image className={styles.bg}
        src="/../public/bg.jpg"
        width={2049}
        height={2049}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.moon}
        src="/../public/moon.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.mountain}
        src="/../public/mountain.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.road}
        src="/../public/road.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />

      <h2 className={styles.text}>Moon Light</h2>

      </div>
    </div>
  )
}

样式文件夹-> global.css

html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

样式文件夹-> Home.module.css

.container {
  background: #0a2a43;
  min-height: 1500px;
}
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section > Image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

这个基本的 html 和 css 可以轻松创建创建视差背景所需的最低要求。出于某种原因，当我添加此代码时，NextJS 似乎不起作用。你能告诉我这里有什么问题吗？

4

0 回答 0