我想在 svg 下面有一个单独的背景颜色,在 svg 上面有一个单独的背景颜色。 请注意,我已经为 body 元素设置了背景图像,并且我将在其上方使用网格布局,并将背景颜色设置为透明。
我尝试使用实心线性渐变作为背景颜色,但这会覆盖 svg 图像。我希望 svg 图像位于背景颜色的顶部。
如果可以将背景颜色设置为像这样的线性渐变。它看起来与我希望的结果类似
body {
background-color: linear-gradient(
to bottom,
var(--color-background-primary-light) 0%,
var(--color-background-primary-light) 40%,
var(--color-background-primary-dark) 40%,
var(--color-background-primary-dark) 100%
);
background-image: url("/images/bg-curvy-desktop.svg");
background-size: 100%;
background-repeat: no-repeat;
background-position: 50% 30%;
}
这是我试图重新创建的设计。
我通过在 html 中使用 svg 并使用 svg 图像的这些属性来修复它。
.curve {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--color-background-primary-dark);
mask-image: url(../../images/bg-curvy-desktop.svg);
mask-size: cover;
z-index: -1;
}
然后在我实现的部分
.section-header {
position: relative;
}
这是 HTML 代码
<div class="grid__container">
<nav class="grid__child grid__child--nav">NAVIGATION</nav>
<header class="grid__child grid__child--header section-header">
<img
class="curve"
src="./images/bg-curvy-desktop.svg"
alt="background-image"
/>
</header>
<section class="grid__child grid__child--features">FEATURES</section>
<section class="grid__child grid__child--about">ABOUT</section>
<section class="grid__child gird__child--reviews">REVIEWS</section>
<section class="grid__child grid__child--cta">CALL TO ACTION</section>
<footer class="grid__child grid__child--footer">FOOTER</footer>
</div>