無法在下一個 JS 和 Tailwind 中放置背景圖片 CSS

Question

我卡住了，無法將背景圖片放在我的下一個 JS 應用程序上。

這是我的代碼。

globals.css

.container {
    padding: 0 2rem;
    background-image: url(../public/images/landing-page-illustration.svg);
}

index.js

import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/navbar';
import styles from '../styles/Home.module.css'

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

Answer 1

你只需要這樣做。 這個對我有用。 用你的 css 更新 tailwind class。

<div className="relative"> <!--position: 'relative' -->
    <Image 
        src="image path"
        layout="fill"
        objectFit="cover"
    />
    <div className="w-full relative"><!-- position: 'relative' -->
        <h2 className="text-center font-semibold text-4xl pb-8 pt-14 text-pink-600">hello</h2>
    </div>
</div>

背景的高度會隨着內容的增加而增加。 您可以通過以下方式固定高度

身高：'80vw'

Answer 2

我也陷入了這個問題，然后我只使用了next-images並在jest.config.js文件中聲明它，如下所示 -

module.exports = {
  async redirects() {
    return [
      {
       ...
      },
    ];
  },
  reactStrictMode: true,
  future: { webpack5: true },
  images: {
    domains: ['https://...'],
  },
};

const withImages = require('next-images');
module.exports = withImages();

並且只是使用<img />標簽來渲染圖像

     <img
        src={Wave}
        style={{
          zIndex: -1,
          width: '100%',
          position: 'absolute',
        }}
        className='md:bottom-px origin-center rotate-180 md:rotate-0 '
        alt=''
      />