html - 如何将文字放在封面图片下方？

Question

我正在尝试实现以下效果。看起来像背景的图像放置在页面的前 60%。如果图像不成比例，则应保持正确的纵横比。

在这张图片之后是一些其他的文字。

我实现了上半场

#fullcover{
    position: absolute;
    background-image: url(img);
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    max-height: 60%;
}

但问题是我的文字现在隐藏在我的图像后面。我怎样才能把它准确地放在下面？ JsFiddle is here .

很抱歉，首先没有包括这个:我宁愿不使用 html，body 100%。

Answer 1

Updated fiddle

如果您知道图片只会占据网站的顶部，您可以将文本对象放置在绝对位置，顶部为 60%。

.text {
    position: absolute;
    top: 60%;
}