如何在垂直渐变的水平方向上淡化垂直渐变？

Question

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

我需要使它成为透明的淡入淡出效果，以便它可以位于图像/视频的顶部。

这里是我的目标的快速视觉：

有什么建议吗？

Answer 1

非常简单，您只需要在线性渐变中添加透明即可。

Locale[] locales = Locale.getAvailableLocales();
List<Locale> localeList = new ArrayList<Locale>();
for (Locale locale : locales) {
    int res = tts.isLanguageAvailable(locale);
    if (res == TextToSpeech.LANG_COUNTRY_AVAILABLE) {
        localeList.add(locale);
    }
}

return Arrays.toString(localeList);

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

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

<div></div>

Answer 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
}

<div class="box"></div>