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

【问题标题】：How to put gradient opacity in my gradient?如何在我的渐变中添加渐变不透明度？
【发布时间】：2020-11-06 14:16:08
【问题描述】：

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

目前，我有这个：

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

这是我当前的代码。

    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%
      );
    }

&lt;div class="bar"&gt;&lt;/div&gt;

【问题讨论】：

标签： css linear-gradients

【解决方案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);
}

&lt;div class="bar"&gt;&lt;/div&gt;

【讨论】：

尝试添加backface-visibility: hidden; 使这些边框更平滑

【解决方案2】：

如果您需要比掩码提供的更好的浏览器支持，我会用一个额外的容器来做一些事情，但总的来说，它是一个看起来很有趣的进度条，希望它是用于儿童游戏或其他东西的。

body {
  background: gray;
  padding-top: 5rem;
}


.bar-container {
  border-radius: 100rem;
  overflow: hidden;
  border: darkgray 2px solid;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
}

.bar {
  height: 50px;
  width: 100%;
  position: relative;
  background-size: 90px 100%;
  background-image: linear-gradient(
    120deg,
    transparent,
    transparent 40%,
    white 40%,
    white 60%,
    transparent 60%
  );
}

.bar::before, .bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.bar::before {
  left: 0;
  background: linear-gradient(45deg, rgba(252,2,82,1) 0%, rgba(0,0,0,0) 50%);  
}

.bar::after {
  right: 0;
  background: linear-gradient(-45deg, rgba(1,253,217,1) 0%, rgba(0,0,0,0) 50%);  
}

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

【讨论】：