使用此属性后背景剪辑文本中断答案

【问题标题】：background-clip text breaks after using this property使用此属性后背景剪辑文本中断
【发布时间】：2022-11-12 11:50:32
【问题描述】：

我遇到了背景剪辑问题：在使用 relative 之后它会中断，我看不到任何原因，文本在那里，但由于 webkit 填充颜色，颜色呈现为透明，但它没有呈现预期的文本渐变在相对位置之后。删除相对位置后，它工作得很好，我需要使用它

这是我的虚拟代码：-

所以这是我在HTML 中的代码：

<h3 class="colormanager">
    <span class="animation_control_js">
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
    </span>
</h3>

出于动画目的，我必须使用 position: relative，（在 FireFox 中工作，但不在 Google Chrome 或 Safari 中）

这是CSS：

.internaltext{
    position: relative;
}

.colormanager {
    font-family:, Verdana, Arial, Helvetica, sans-serif;
    font-weight: 600;
    position: relative;
    top: 0;
    white-space: none;
    margin-top: 15px;
    color:transparent;
    background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    padding-left: 20px
}

我尝试了以下方法：

使用inherit: all

全部使用继承

color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

我没有找到任何有趣的答案，所以我在这里提问。

【问题讨论】：

标签： html css flexbox css-selectors css-transitions

【解决方案1】：

不要在这里使用 relative

在制作动画时使用它与不同的班级并使用idk白色或银色的webkit填充，眼睛不会有太大差异，看起来更酷

【讨论】：