CSS径向渐变遮罩导致重叠Div内文本不可见问题求助

我用CSS实现了波浪效果（效果截图：），对应的HTML代码如下：

<div>
  <div class="box w-[full] h-[10rem] bg-indigo-500"></div>
  <div class="box1 w-[full] h-[10rem] bg-indigo-800 mt-[-10rem] relative z-0">
    <div class="z-10 absolute">
      <p>Made for learning purposes</p>
      <p>Code at <a href="">github</a></p>
    </div>
  </div>
</div>

CSS代码如下：

.box {
  --mask: radial-gradient(42.43px at 50% 60px, #000 99%, #0000 101%)
      calc(50% - 60px) 0/120px 100%,
    radial-gradient(42.43px at 50% -30px, #0000 99%, #000 101%) 50% 30px/120px
      100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.box1 {
  --mask: radial-gradient(42.43px at 50% 60px, #000 99%, #0000 101%)
      calc(50% - 60px) 0/120px 100%,
    radial-gradient(42.43px at 50% -30px, #0000 99%, #000 101%) 50% 30px/120px
      100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  margin-left: -110px;
}

目前遇到的问题是深色Div内的文本无法显示，已尝试z-index、绝对定位和相对定位，但均无效，请问如何用Tailwind CSS解决该问题？

问题根源在于.box1元素设置的mask属性会裁剪元素及其所有子元素，子元素会跟着父元素一起被遮罩裁剪，所以单纯调整z-index和定位无法解决。

核心解决思路 #

将文本容器从设置了mask的.box1元素中移出，放到外层容器内，通过绝对定位控制位置，同时确保文本在波浪效果上方显示。

修改后的代码（结合Tailwind） #

<div class="relative">
  <div class="box w-full h-[10rem] bg-indigo-500"></div>
  <div class="box1 w-full h-[10rem] bg-indigo-800 mt-[-10rem]"></div>
  <!-- 文本容器移到外层，独立于遮罩元素 -->
  <div class="absolute z-10 left-[110px] top-[50%] translate-y-[-50%] text-white">
    <p>Made for learning purposes</p>
    <p>Code at <a href="" class="underline">github</a></p>
  </div>
</div>

关键调整说明 #

• 外层容器添加relative，为绝对定位的文本容器提供参考基准
• 文本容器通过left-[110px]抵消.box1的margin-left: -110px偏移，保证位置正确
• 添加text-white让文本在深色背景上可见（之前未设置文本颜色也是显示异常的潜在原因）

进阶：将遮罩转为Tailwind自定义工具类 #

为了让代码更贴合Tailwind风格，可在tailwind.config.js中添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.wave-mask': {
          '--mask': 'radial-gradient(42.43px at 50% 60px, #000 99%, #0000 101%) calc(50% - 60px) 0/120px 100%, radial-gradient(42.43px at 50% -30px, #0000 99%, #000 101%) 50% 30px/120px 100% repeat-x',
          '-webkit-mask': 'var(--mask)',
          'mask': 'var(--mask)',
        }
      })
    }
  ],
}

之后HTML可简化为：

<div class="relative">
  <div class="wave-mask w-full h-[10rem] bg-indigo-500"></div>
  <div class="wave-mask w-full h-[10rem] bg-indigo-800 mt-[-10rem] ml-[-110px]"></div>
  <div class="absolute z-10 left-[110px] top-[50%] translate-y-[-50%] text-white">
    <p>Made for learning purposes</p>
    <p>Code at <a href="" class="underline">github</a></p>
  </div>
</div>

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