在缩放期间保留背景图像后的文本

Question

在这个小提琴中https://jsfiddle.net/bcc8jwmm/我想保留文字低于背景图像。使用top-padding或position: relative可以获得它，但在放大/缩小后，文本并不完全是贝娄图像。如何解决？

Answer 1

您可以尝试使用视口单元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>