如何使透明文本忽略其父div背景色？

.parent-div {
  background-color: #f0f0f0; /* 父div的背景色 */
}

.transparent-text {
  color: #000; /* 文本颜色 */
  background: linear-gradient(transparent, transparent),
              radial-gradient(circle, rgba(255,255,255,0.8), transparent);
  background-clip: text;
  -webkit-background-clip: text; /* 兼容WebKit浏览器 */
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
}

.parent-div {
  background-color: #f0f0f0; /* 父div的背景色 */
  position: relative;
}

.transparent-text::before {
  content: attr(data-text); /* 使用data属性来显示文本 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: transparent;
  background: #f0f0f0; /* 父div的背景色 */
  background-clip: text;
  -webkit-background-clip: text; /* 兼容WebKit浏览器 */
}

<div class="parent-div">
  <span class="transparent-text" data-text="透明文本">透明文本</span>
</div>