Question

我有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。

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

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

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

CSS两层渐变效果

2 个答案: