我有一个MDX博客，它呈现了一篇博客文章。

pages/index.tsx

<main className="flex min-h-screen dark:bg-black">
                <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr]">
                    <div className="mdx-wrapper prose relative col-[2/5] max-w-full dark:prose-light lg:grid lg:grid-cols-[70px_1fr_70px]">
                        <MDXLayoutRenderer mdxSource={props.code as never} />
                    </div>
                </div>
            </main>

MDXLayoutRenderer是mdx被插入到页面中的位置。

index.mdx

this is a title

import { Splatter } from '../../components/Splatter.tsx'

this is a block

some giberrish

some giberrish

some giberrish

some giberrish

<Splatter />

yet another block

some giberrish

some giberrish

some giberrish

some giberrish

components/Splatter.tsx

export const Splatter = () => (
    <div className="relative inset-0 h-64 w-64 bg-[url('/splatter.jpg')]">
    </div>
)

public/splatter.jpg

由于某种原因，飞溅要么与index.mdx中的文本重叠，要么像div一样，即它向下推yet another block
我希望飞溅的背景像一个背景图像。
不知道怎么做。我尝试使用img，但它没有给予预期的结果。
我目前的bg-[url('/splatter.jpg')]方法只是顺风中的背景图像。也不行。
我尝试使用z索引和不同的位置绝对和相对，但它不去的背景。
怎么解决这个问题？