我有一個mdx博客來呈現(xiàn)一篇博客文章。

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/splast . tsx

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

public/splatter.jpg

出于某種原因，飛濺要么與index.mdx中的文本重疊，要么表現(xiàn)得像一個div，也就是說，它向下推另一個塊

我希望飛濺像背景圖像一樣出現(xiàn)在背景中。

我不確定怎么做？我確實嘗試過使用img，但是沒有得到想要的結(jié)果。

我現(xiàn)在的方法bg-[url('/splatter.jpg')]只是順風(fēng)中的背景圖。也不行。

我試過用z-index & amp不同位置絕對&。相對的但是它不在背景里。

對此的解決方法是什么？

您可以嘗試使用兩個圖像，用相對父位置和負(fù)z-index將它們絕對定位在左側(cè)和右側(cè)。

大概是這樣的:

export const Splatter = () => (
  <div className="relative -z-10">
    <div className="absolute bg-cover left-[100%] h-96 w-[500px] bg-[url('https://i.stack.imgur.com/J0ik2.jpg')]"></div>
    <div className="absolute bg-cover right-[100%] h-96 w-[500px] bg-[url('https://i.stack.imgur.com/J0ik2.jpg')]"></div>
  </div>
);

隨意調(diào)整高度和寬度，找到適合自己的款式。對于較小的屏幕，我認(rèn)為你應(yīng)該隱藏這個。

下面是codesandbox示例。