<分区>
我正在尝试制作一个完整的渐变背景，问题是我还需要一种剪裁蒙版，它在背景颜色之上给出一个形状，我最终做的是使用 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 制作形状更好的解决方案，但我不知道。
有什么建议吗？
谢谢
最佳答案
这是一个解决方案 - 为您的 SVG 添加一个高度以确保它保持为页面的固定百分比，然后添加一个 preserveAspectRatio/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>关于html - 顶部混合有 svg 形状的全渐变背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55928427/