MDX博客中如何将泼墨图设为背景且不干扰文本布局？

以下是几种可行的解决方案，针对你遇到的组件重叠或挤压内容的问题：

方案1：绝对定位+父容器相对定位（推荐） #

将Splatter组件设为绝对定位脱离文档流，同时让父容器保持相对定位作为基准，确保背景只作用于当前内容块：

// Splatter.jsx 组件代码
export default function Splatter() {
  return (
    <div className="absolute inset-0 z-[-1] opacity-20">
      <img 
        src="/splatter.jpg" 
        alt="泼墨背景" 
        className="w-full h-full object-cover" 
      />
    </div>
  );
}

// MDX 中的使用方式
<div className="relative py-8">
  <Splatter />
  <p>你的博客正文内容...</p>
  <p>yet another block</p>
</div>

• relative：让父容器成为绝对定位元素的参考基准
• inset-0：让背景组件占满父容器的整个空间
• z-[-1]：将背景层置于文本内容下方，避免遮挡文字
• object-cover：保证背景图拉伸填充容器且不变形
• opacity-20：调整背景透明度，确保文字可读性

这种方式下，背景不会挤压下方内容，父容器高度由内部文本自然撑开。

方案2：直接为内容容器添加背景样式 #

如果不需要独立的Splatter组件，可直接给文本容器应用Tailwind背景类，省去额外组件的麻烦：

<div className="py-8 bg-[url('/splatter.jpg')] bg-cover bg-center bg-opacity-20">
  <p>你的博客正文内容...</p>
  <p>yet another block</p>
</div>

• bg-cover：让背景图按比例填充容器，超出部分裁剪
• bg-center：将背景图居中显示
• bg-opacity-20：控制背景透明度，避免影响文字阅读

容器高度由内部内容决定，背景图仅作为容器的背景存在，不会出现重叠或挤压问题。

方案3：CSS Grid 布局叠加元素 #

利用Grid布局将背景组件和文本内容放在同一个网格单元格中，实现层叠效果：

// Splatter.jsx 组件代码
export default function Splatter({ className }) {
  return (
    <img 
      src="/splatter.jpg" 
      alt="泼墨背景" 
      className={`w-full h-full object-cover ${className}`} 
    />
  );
}

// MDX 中的使用方式
<div className="grid">
  <Splatter className="col-start-1 row-start-1 opacity-20" />
  <div className="col-start-1 row-start-1 p-8">
    <p>你的博客正文内容...</p>
    <p>yet another block</p>
  </div>
</div>

• grid：将容器设为网格布局
• col-start-1 row-start-1：让背景和文本都占据第一列第一行的单元格，实现层叠
• 文本容器会自动覆盖在背景图上方，且容器高度由文本内容决定，不会挤压下方元素

注意事项 #

• 若使用绝对定位，务必确保父容器设置relative，否则背景会相对于整个页面定位
• 根据泼墨图的风格调整opacity值，平衡背景装饰性和文字可读性
• 如果背景图尺寸不合适，优先用object-cover（图片元素）或bg-cover（背景样式）避免拉伸变形

内容的提问来源于stack exchange，提问作者deadcoder0904