如何在其尖端水平淡化垂直渐变？答案

【问题标题】：How can I fade a vertical gradient horizontally at its tips?如何在其尖端水平淡化垂直渐变？
【发布时间】：2018-10-28 06:26:53
【问题描述】：

我正在努力寻找一种在其左侧和右侧淡化垂直渐变的好方法。基本上是一个上下渐变，左右两端褪色到 0% 不透明度。

我需要它是透明的淡出，以便它可以位于图像/视频之上。

以下是我的目标的快速概览：

有什么建议吗？

【问题讨论】：

你所拥有的不是线性渐变，而是非常径向渐变。
有什么理由避免使用 png 图像文件吗？

标签： html css transparency gradient linear-gradients

【解决方案1】：

很简单，你只需要在线性渐变中添加透明即可。

div {
      background:linear-gradient(to right, transparent, #00F5CB, transparent);
      width: 100%;
      height:64px;
    }

&lt;div&gt;&lt;/div&gt;

【讨论】：

现在将中间的纯色（#00F5CB）变成垂直渐变。这就是我想知道的。

【解决方案2】：

使用multiple backgrounds。第一个在顶部。

div {
  width: 100%;
  height: 100px;
  background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
  linear-gradient( to bottom, Lightgreen, Aquamarine);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

由于白色-透明-白色渐变使用白色淡出，我不能使用此方法叠加在图像和视频之上。这是这里的特殊问题。如何在其两侧淡出垂直渐变以便它可以覆盖图像？

【解决方案3】：

你可以像这样尝试多个背景：

.box {
  width: 500px;
  height: 80px;
  margin:auto;
  background:
   radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
   linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
  background-repeat:no-repeat;
      color: ;
    color: ;
}
body {
  background:pink
}

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

【讨论】：