如何使伪元素位于渐变文字填充的<p>父元素文本后方？

这个坑我之前踩过好几次！你遇到的问题本质就是color: transparent在搞事情——当你给

设置这个属性后，它的文本区域其实是完全镂空的，哪怕你给父元素和伪元素设了z-index，也根本起不到遮挡作用，伪元素的描边自然就从镂空的地方透出来了。

要实现渐变文字在上、描边在下层的效果，我们得换个思路，别再死磕父元素的z-index了，直接调整元素的层级分工就行。这里给你两个好用的解决方案：

• 方案一：让父元素负责描边，伪元素负责渐变文字
  这个方案改动最小，直接调换两者的职责：

  p{
    position: relative;
    font-size: 7rem;
    margin: 0;
    position: absolute;
    top:10vh;
    right: 55vw;
    font-family: "New Rocker", 'Times New Roman', serif;
    /* 父元素作为底层，只显示描边 */
    -webkit-text-stroke: 2px #09827a;
  }
  
  p::after{
    content: "Cool CDs";
    position: absolute;
    top: 0;
    left: 0;
    /* 伪元素负责上层的渐变文字 */
    background-image: linear-gradient(#0b6d46, #09827a);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    z-index: 1;
  }
  

  HTML保持不变：

  <p>Cool CDs</p>
  

  这样调整后，父元素的描边在底层，伪元素的渐变文字靠着z-index:1稳稳叠在上面，完全不会出现描边透出来的问题。

• 方案二：用两个伪元素分层（隐藏原文本）
  如果你想让原

  的文本彻底“隐身”，用两个伪元素分别负责描边和渐变文字，结构更清晰：

  p{
    position: relative;
    font-size: 7rem;
    margin: 0;
    position: absolute;
    top:10vh;
    right: 55vw;
    font-family: "New Rocker", 'Times New Roman', serif;
    color: transparent; /* 隐藏原文本 */
  }
  
  /* 底层描边 */
  p::before{
    content: "Cool CDs";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: 2px #09827a;
    z-index: 0;
  }
  
  /* 上层渐变文字 */
  p::after{
    content: "Cool CDs";
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(#0b6d46, #09827a);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    z-index: 1;
  }
  

  这里每个伪元素各司其职，通过z-index明确层级，效果和方案一完全一样，看你更习惯哪种写法。

最后再给你补个知识点：为什么原来的z-index没用？因为color: transparent配合background-clip:text时，

的文本区域是完全镂空的——相当于这个区域没有任何实体像素，所以即使你把伪元素的z-index设为-1，它的内容还是会透过这个镂空区域“钻”到视觉最上层，这是这个CSS组合的特殊表现，z-index在这里根本起不到遮挡作用，换个分层思路就搞定啦！

内容来源于stack exchange