无法在下一个 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=''
      />