reactjs 无法在布局组件React和Tailwind CSS下设置背景

u4vypkhs 于 2023-02-18 发布在 React

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

我尝试在我的组件下设置背景图像。但是它总是在上面，所以我的元素在它下面。或者在第二个变体中，所有的工作都很好，除了我不能只对背景应用blur-xl。它适用于背景和布局元素。
bg-repeat-y需要我拷贝我的图像，对吗？

import moons from './../assets/moon.svg'

const Background = ({ children }) => {
    return (
        <div className='bg-white '>
            
            <div className='min-h-screen min-w-screen bg-repeat-y' style={{ backgroundImage: `url(${moons})` }}>
                <div className="div"></div>
        </div>
            {children}
        </div>
    );
}
export default Background;

此背景元素将Laoyout中的其他元素 Package 在react-router-dom中

export const AppLayout = () => (
    <div>
        <Background>
                <NewNavbar />
                <Outlet />
                <Footer />
        </Background>
    </div>
);

帮帮我，求你了！

reactjs

来源：https://stackoverflow.com/questions/75478406/cant-set-background-under-layout-components-react-and-tailwind-css

2条答案

按热度按时间

xwmevbvl1#

试试这个，模糊将是应用之间你的组件和背景图像

export const AppLayout = () => (

<Background>
  <div class="backdrop-blur-xl h-full">
    <NewNavbar />
    <Outlet />
    <footer />
  </div>
</Background>
);

如果您有任何疑问，请参考此链接https://play.tailwindcss.com/yX9aAMagRj

赞(0）回复(0）举报 2023-02-18

yyyllmsg2#

对于你提到的第一个变体/方法，你可以使用类-z-10将背景的z-index设置为负数，这样你的背景就不会覆盖其他元素。

赞(0）回复(0）举报 2023-02-18