當你的白色透明漸變看不到效果 背景 實現過程

白色透明漸變想要看到效果是需要有參照物的，可以看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，再看代碼發現

當時是爲了與下面的文字隔離...