当你的白色透明渐变看不到效果 背景 实现过程

白色透明渐变想要看到效果是需要有参照物的，可以看codepen上提到的案例:https://codepen.io/xiaodun/pen/BapxoBq

背景

一开始的展开功能是这样的

在测试的极力推动下，产品的认可下，UI决定加一个白色的透明渐变

实现过程

      <div ref="btn" class="btn" v-if="ifOver" @click="onToggle">
        <span class="gradient">
          <span class="sign">占位符</span>
        </span>
        <span class="text">
          {{ unfold ? "收起" : "展开" }}
        </span>
      </div>

当我通过搜索引擎查找如何实现一个白色透明渐变时，得到的答案是一致的

    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
    );

然而我使用的的时候却是这样的

直到我将btn的背景色设置为透明

      background-color: transparent;

然而在写codpen的时候才发觉，是不需要主动设置透明的，因为background-color的初始值就是transparent，再看代码发现

当时是为了与下面的文字隔离...