html - 缩放期间在背景图像之后保留文本

Question

在这个 fiddle 中 https://jsfiddle.net/bcc8jwmm/我想将文字保留在背景图片下方。使用 top-padding 或 position: relative 可以获得它，但在放大/缩小后，文本并不完全位于图像下方。如何修复？

Answer 1

您可以尝试使用视口(viewport)单位 vmin 或 vmax。

Updated Example

body {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsSKLt4iKH3QPxeZFYmxwOVKZl84p0t1EQVvBMR5OlRbJioE_f)  no-repeat center top;
    background-size: cover;
}
p {
    position: relative;
    top: 50vmax;
}

<p>text</p>