我正在构建一个简单的响应式登陆页面。我有一个半圆形背景图像(svg),我希望它覆盖内部的所有内容并显示完整高度。
我的演示:https://codepen.io/1412108/pen/GxwQgz?editors=1100
它工作得很好,至少在中小屏幕上是这样。这里的问题是,在较大的屏幕中,它覆盖了内部的所有内容,但丢失了背景的底部(曲线)。您可以调整或缩小浏览器来查看问题。
首先,我使用了带有负位置的background-position
,例如background-position: center -10vw
。它可以工作,但不适用于所有屏幕。我想知道是否有基于某些东西的每个屏幕的解决方案(例如 css 或 javscript 中的 calc
)?
最佳答案
而不是
background-position: center;
你可以使用
background-position: bottom;
这可以确保底部有半圆形部分。
关于html - css - 显示背景全高并覆盖里面的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49709136/