带有svg形状的完整渐变背景混合在顶部

Question

我正在尝试制作完整的渐变背景，但事实是，我还需要一种剪裁类型的蒙版，该蒙版可以在背景颜色的顶部提供形状，我最终要做的是使用SVG制作形状并“剪切”背景的顶部，以提供所需的形状。

现在的问题是，我不知道如何混合颜色以进行匹配，我试图设置SVG颜色以匹配背景渐变的开始颜色，但是不起作用，因为如果您将屏幕的高点变大，颜色开始改变，所以我无法使其一致。

这是我到目前为止所拥有的：

body {
            /* Keep the inherited background full size. */
            background-attachment: fixed;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
          padding-left:100px;
          padding-right:100px;
        }

.glass {
            height: 100vh;
            box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
            position: relative;
            z-index: 1;
            background: inherit;
            overflow: hidden;
            flex-grow: 100;
            background: rgb(255,235,59);
            background: linear-gradient(180deg, rgba(255,235,59,1) 0%, rgba(253,216,53,1) 54%, rgba(249,168,37,1) 100%);

        }

svg {
            background: white;
            background-size: cover;
            width: 100%;
            display: block;
            position: absolute;
        }

.container{
  padding-top:40vh;
}

label{
  color: white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="glass">

        <svg viewbox="0 0 100 25">
            <path fill="#ffeb3b" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
        </svg>
        <div class="container">

            <div class="row">
                <div class="input-field col s12">
                    <input id="email" type="email" class="validate">
                    <label for="email">Email</label>
                </div>
            </div>

            <div class="row">
                <div class="input-field col s12">
                    <input id="password" type="password" class="validate">
                    <label for="password">Password</label>
                </div>
            </div>


        </div>
    </div>

也许有比使用SVG更好的解决方案，但我不知道。

有什么建议吗？

谢谢

Answer 1

这是一个解决方案-在SVG上增加一个高度以确保它保持在页面的固定百分比，然后添加一个prepareAspectRatio / slice以确保它不会从100％的宽度缩小。并调整渐变淡入的起点，使其开始于SVG形状的底部。

我想这就是你想要的吗？

body {
        /* Keep the inherited background full size. */
        background-attachment: fixed;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      padding-left:100px;
      padding-right:100px;
    }

.glass {
        height: 100vh;
        box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
        position: relative;
        z-index: 1;
        background: inherit;
        overflow: hidden;
        flex-grow: 100;
        background: rgb(255,235,59);
        background: linear-gradient(180deg, rgba(255,235,59,1) 0vh, rgba(255,235,59,1) 10vh, rgba(253,216,53,1) 54vh, rgba(249,168,37,1) 100vh);

    }

svg {
        background: white;
        background-size: cover;
        height: 10vh;
        width: 100%;
        display: block;
        position: absolute;
    }

.container{
  padding-top:30vh;
}

label{
  color: white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="glass">

        <svg viewbox="0 0 100 25" preserveAspectRatio="xMidYMid slice">
            <path fill="#ffeb3b" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
        </svg>
        <div class="container">

            <div class="row">
                <div class="input-field col s12">
                    <input id="email" type="email" class="validate">
                    <label for="email">Email</label>
                </div>
            </div>

            <div class="row">
                <div class="input-field col s12">
                    <input id="password" type="password" class="validate">
                    <label for="password">Password</label>
                </div>
            </div>


        </div>
    </div>