如何实现图形覆盖文字效果？CSS或图片方案哪个更优？

一、CSS 和 图片方案怎么选？ #

• 图片方案：
  适合图形样式复杂的场景（比如不规则曲线叠加、带精细纹理），直接切图就能用，还原度拉满，不用纠结CSS兼容性问题。但缺点也明显：缩放容易糊，文件比CSS代码大，后期改样式得重新作图，灵活性差。
• CSS方案：
  图形是矢量的，缩放不失真，文件体积小，样式改代码就行，维护方便。但复杂图形（比如多段不规则路径）写起来麻烦，还要考虑浏览器兼容性（比如某些CSS形状属性的支持度）。

二、关于你提到的「Node Shapes」实现方式 #

目标网站用的Node Shapes，其实就是用SVG或者CSS自定义形状（比如clip-path、shape-outside，或者伪元素+渐变/边框拼形状）来做覆盖效果，属于CSS方案的进阶玩法，给你两种具体实现思路：

1. SVG 嵌入实现 #

把图形导出成SVG代码，直接嵌到页面里，用position: absolute定位到文字上方，配合z-index控层级。SVG是矢量的，缩放没问题，还能通过CSS改颜色、透明度这些属性。
示例代码：

<div class="text-wrap">
  <p>这里是需要被覆盖的文字内容</p>
  <svg class="overlay-shape" viewBox="0 0 100 50">
    <!-- 替换成你的图形路径 -->
    <path d="M0,25 Q25,0 50,25 T100,25" fill="#ff4400" opacity="0.6"/>
  </svg>
</div>

.text-wrap {
  position: relative; /* 给绝对定位的SVG做参考 */
}
.overlay-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 确保图形在文字上方 */
  width: 100%;
  height: auto;
}
.text-wrap p {
  position: relative;
  z-index: 0; /* 文字层级低于图形，就能被覆盖 */
}

2. CSS 伪元素画形状 #

如果图形是规则的，或者能用渐变、边框拼出来，直接用CSS画更省事。比如用border-radius做圆角覆盖，或者linear-gradient画斜向色块，再定位到文字上面。
示例代码：

<div class="text-box">
  <h2>这是要被覆盖的标题</h2>
</div>

.text-box {
  position: relative;
  padding: 2rem;
}
.text-box::after {
  content: '';
  position: absolute;
  top: 15px;
  right: 15px;
  width: 90px;
  height: 90px;
  background: linear-gradient(45deg, #ffdd00, #ff6600);
  border-radius: 50% 0 50% 0;
  z-index: 1; /* 图形层级更高 */
}
.text-box h2 {
  position: relative;
  z-index: 0; /* 文字在图形下方 */
}

三、你之前z-index没生效的可能原因 #

z-index只对非静态定位（relative/absolute/fixed/sticky）的元素生效，检查一下图形和文字的position属性是不是没设置——如果元素是默认的static，z-index根本不起作用。

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