如何在我的渐变中添加渐变不透明度？

Question

在我的模型中，条纹具有从透明到半透明的渐变不透明效果。

目前，我有这个：

如何使白色条纹具有透明度渐变？

这是我当前的代码。

    body {
      background: gray;
    }

    .bar {
      height: 50px;
      width: 100%;
      background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
      border-radius: 100rem;
      position: relative;
    }
    /** Stripes. */
    .bar::before {
      content: "";
      position: absolute;
      border-radius: 100rem;
      height: 100%;
      width: 100%;
      background-size: 90px 100%;
      background-image: linear-gradient(
        120deg,
        transparent,
        transparent 40%,
        white 40%,
        white 60%,
        transparent 60%
      );
    }

<div class="bar"></div>

Answer 1

您可以在伪元素上添加遮罩层：

body {
  background: gray;
}

.bar {
  height: 50px;
  width: 100%;
  background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
  border-radius: 100rem;
  position: relative;
}


/** Stripes. */

.bar::before {
  content: "";
  position: absolute;
  border-radius: 100rem;
  height: 100%;
  width: 100%;
  background-size: 90px 100%;
  background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
  -webkit-mask:linear-gradient(white,transparent);
          mask:linear-gradient(white,transparent);
}

<div class="bar"></div>