如何将父元素渐变裁剪应用于子元素文本？

想把父元素的渐变裁剪到两个子h1元素的文本上，但效果不对——要么渐变整个父容器都显示，要么裁剪后文本变成全白。需要两个h1共用同一份渐变保证图案一致，试过把div设为absolute也没解决，求可行方案。

<div className="flex flex-col w-full mesh-gradient-background bg-clip-text z-10">
   <h1 className="animate-fade-up bg-clip-text text-transparent text-center font-display text-2xl font-bold tracking-[-0.03em] opacity-0 drop-shadow-sm [text-wrap:balance] md:text-5xl md:leading-[5rem] z-[10]" 
    style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}>
            Long Text 1
   </h1>
   <h1 className="transition-all duration-1000 animate-fade-up text-center font-display text-4xl font-bold tracking-[+0.03em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem] bg-size-200 bg-pos-0 hover:bg-pos-100 w-min cursor-default"
   style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}>
            Long Text 2
   </h1>
</div>

核心问题是bg-clip-text只能裁剪自身元素的背景到文本，父元素的背景没法直接被子元素的bg-clip-text裁剪。要实现多个文本共用同一份渐变且图案连贯，换个思路就行：

• 移除父元素的bg-clip-text，保留渐变背景类mesh-gradient-background，同时给父元素加overflow: hidden和position: relative，确保渐变只在父容器范围内显示。
• 给两个h1元素添加mix-blend-mode: screen（可根据渐变颜色调整，比如difference或multiply），同时保留text-transparent，让文本区域透出父元素的渐变背景。
• 如果要保证渐变在两个h1上的图案完全连贯，给父元素的渐变加上background-attachment: fixed，或者手动调整background-position的基准，避免文本位置变化导致图案错位。

修改后的代码示例：

<div className="flex flex-col w-full mesh-gradient-background overflow-hidden relative z-10">
   <h1 className="animate-fade-up text-transparent text-center font-display text-2xl font-bold tracking-[-0.03em] opacity-0 drop-shadow-sm [text-wrap:balance] md:text-5xl md:leading-[5rem] z-[10] mix-blend-mode:screen relative" 
    style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}>
            Long Text 1
   </h1>
   <h1 className="transition-all duration-1000 animate-fade-up text-center font-display text-4xl font-bold tracking-[+0.03em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem] w-min cursor-default mix-blend-mode:screen relative"
   style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}>
            Long Text 2
   </h1>
</div>

另外，如果你需要hover时整个渐变跟着移动（而不是单个h1的背景动），可以把bg-size-200、bg-pos-0、hover:bg-pos-100这些属性移到父元素上，这样hover父容器时整个渐变就会统一位移，保持两个文本的图案一致性。

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