html - css - 显示背景全高并覆盖里面的内容

Question

我正在构建一个简单的响应式登陆页面。我有一个半圆形背景图像(svg)，我希望它覆盖内部的所有内容并显示完整高度。

我的演示:https://codepen.io/1412108/pen/GxwQgz?editors=1100

它工作得很好，至少在中小屏幕上是这样。这里的问题是，在较大的屏幕中，它覆盖了内部的所有内容，但丢失了背景的底部(曲线)。您可以调整或缩小浏览器来查看问题。

首先，我使用了带有负位置的background-position，例如background-position: center -10vw。它可以工作，但不适用于所有屏幕。我想知道是否有基于某些东西的每个屏幕的解决方案(例如 css 或 javscript 中的 calc)？

Answer 1

而不是

background-position: center;

你可以使用

background-position: bottom;

这可以确保底部有半圆形部分。