reactjs 尝试使用Tailwind CSS和Next JS(Typescript)为某个部分设置背景图像

jm81lzqq 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(148)

我已经尝试了不同的解决方案，我发现在这里的Stackoverflow，但没有运气添加一个背景图像的一节。这是我目前的情况。

import Image from '../../public/images/header2.jpg';
  
  const Home: React.FC = () => {
  
    return (
        <main className="super-donnie-bg-slate">
            <section id="first" className="bg-no-repeat bg-bottom bg-cover px-4 md:px-8" style={{ backgroundImage:`url(${Image})`,backgroundRepeat:"no-repeat" }}>
                <div className="container max-w-xs w-full md:max-w-sm lg:max-w-md xl:max-w-lg mx-auto pt-24 pb-96 "><img className="mb-8 max-w-full w-64 sm:w-full mx-auto" src="/images/fungifimage.gif" alt="Super donnie"></img>
                    <div className="mb-8">
                        <div className="super-donnie-text-yellow flex justify-between w-full mb-4"></div>
                        
                    </div>
                    <p className="text-center text-2xl leading-tight super-donnie-font-press-start-2p ">text here.</p>
                
                </div>
            </section>

我可以得到一个图像，你可以看到从图像插入的div，但设置一个背景图像在部分，没有运气。

reactjs

来源：https://stackoverflow.com/questions/76497633/trying-to-set-a-background-image-to-a-section-using-tailwind-css-and-next-jstyp

2条答案

按热度按时间

dgtucam11#

找到了解决办法在tailwind.config.js文件中添加图像，如下所示，

backgroundImage: {
        'hero' : "url('../public/images/header2.jpg')",
        'basic-bg' : "url('../public/images/bg-basic.jpg')",
        'team-bg' : "url('../public/images/bg-team.jpg')"
      }

赞(0）回复(0）举报 2023-06-22

n6lpvg4x2#

你可以使用className从顺风css和必须宽度和高度和关闭标签img在第一个标签

bg-[url（'/img/hero-pattern.svg'）]

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

如果您需要使用一次性的宽高比值，而该值在主题中没有意义 *

方面-[4/3]

这里是您的代码

<section id="first" className="bg-cover px-4 md:px-8   bg-[url(`${Image}`)]  bg-no-repeat     aspect-[4/3] w-full" >
            <div className="container max-w-xs w-full md:max-w-sm lg:max-w-md xl:max-w-lg mx-auto pt-24 pb-96  aspect-[4/3] "><img className="mb-8 max-w-full w-64 sm:w-full mx-auto" src="/images/fungifimage.gif" alt="Super donnie"/>
                <div className="mb-8">
                    <div className="super-donnie-text-yellow flex justify-between w-full mb-4"></div>
                    
                </div>
                <p className="text-center text-2xl leading-tight super-donnie-font-press-start-2p ">text here.</p>
            
            </div> </section>

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 尝试使用Tailwind CSS和Next JS(Typescript)为某个部分设置背景图像

2条答案

相关问题

热门标签

最新问答