CSS 两层渐变效果答案

【问题标题】：CSS two layer gradient effectCSS 两层渐变效果
【发布时间】：2018-12-09 19:00:25
【问题描述】：

我有 CSS 命令

        .overlay-menu {
            top: 0px;
            left: 0px;
            width: 300px;
            height: 300px;
            background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);}

但我有问题。如何为下一层添加图层？

我从这个命令中添加下一层的想法是：

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 49%, rgba(0, 0, 0, 0) 100%);

我想要circle with linear tranparency。

【问题讨论】：

标签： html css styles

【解决方案1】：

您可以同时使用两个渐变。

.overlay-menu {
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom, #f69d3c, #f69d3c, transparent, #f69d3c, #f69d3c), 
              radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}

&lt;div class="overlay-menu"&gt;&lt;/div&gt;

【讨论】：

是的，这是解决方案，但我想将橙色替换为透明度。

【解决方案2】：

是的，这是解决方案，但我想将橙色替换为透明度。

我正在添加的解决方案：

.overlay-menu {
            top: 0px;
            left: 0px;
            width: 300px;
            height: 300px;
            background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
            -webkit-mask-image:
                -webkit-gradient(linear, center bottom, center top,
                color-stop(0, rgba(0, 0, 0, 0)),
                color-stop(0.15, rgba(0, 0, 0, 0.6)),
                color-stop(0.5, rgba(0, 0, 0, 0.8)),
                color-stop(0.75, rgba(0, 0, 0, 0.6)),
                color-stop(0.85, rgba(0, 0, 0, 0.5)),
                color-stop(0.95, rgba(0, 0, 0, 0)));
              }

<div class="overlay-menu"></div>

【讨论】：