Html 如何使垂直渐变的尖端水平渐变？

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

我需要它是一个透明的淡出，以便它可以在图像/视频的顶部

以下是我的目标的快速视觉：

---

有什么建议吗？

非常简单，只需在线性渐变中添加透明

div{
背景：线性渐变（向右，透明，#00F5CB，透明）；
宽度：100%；
高度：64px；
}

---

非常简单，只需在线性渐变中添加透明

div{
背景：线性渐变（向右，透明，#00F5CB，透明）；
宽度：100%；
高度：64px；
}

使用。第一个在上面

div{
宽度：100%；
高度：100px；
背景图像：线性渐变（向右，白色0%，透明30%，透明70%，白色100%），
线性梯度（至底部、浅绿色、海蓝绿色）；
}

使用。第一个在上面

div{
宽度：100%；
高度：100px；
背景图像：线性渐变（向右，白色0%，透明30%，透明70%，白色100%），
线性梯度（至底部、浅绿色、海蓝绿色）；
}

---

您可以尝试以下多种背景：

.box{
宽度：500px；
高度：80px；
保证金：自动；
背景：
径向梯度（顶部为椭圆，#7ff5b0 20%，透明70%）顶部中心/80%100%，
线性梯度（向右，透明0%，#19d9ef 30%，#19d9ef 70%，透明100%）；
背景重复：无重复；
颜色：；
颜色：；
}
身体{
背景：粉红色
}

---

您可以尝试以下多种背景：

.box{
宽度：500px；
高度：80px；
保证金：自动；
背景：
径向梯度（顶部为椭圆，#7ff5b0 20%，透明70%）顶部中心/80%100%，
线性梯度（向右，透明0%，#19d9ef 30%，#19d9ef 70%，透明100%）；
背景重复：无重复；
颜色：；
颜色：；
}
身体{
背景：粉红色
}

---

现在将中间的纯色（#00F5CB）变成垂直渐变色。这就是我想知道的。现在把中间的纯色（#00F5CB）变成垂直渐变。这就是我想知道的。因为白色透明的白色渐变使用白色来淡出，所以我不能用这种方法覆盖图像和视频。这是这里的特殊问题。如何使垂直渐变的侧面淡出以覆盖图像？因为白色透明的白色渐变使用白色淡出，所以我不能将此方法用于图像和视频的覆盖。这是这里的特殊问题。我怎样才能淡出一个侧面的垂直梯度，这样它就可以覆盖在图像上？你有什么理由不使用png图像文件吗？你有什么理由不使用png图像文件吗？你有什么理由不使用png图像文件吗？你有什么理由不使用png图像文件吗？