Html 如何将文本放在封面图像下方？

我试图达到以下效果。看起来像背景的图像被放置在页面的顶部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%;
}

但问题是，我的文本现在隐藏在我的图像后面。我怎样才能把它准确地放在下面

很抱歉，首先没有包括这一点：我宁愿不使用html，正文100%。

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

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

加：

并删除：

position: absolute;
top: 0; 
left: 0;
right: 0;
bottom: 0;

---

这应该可以解决问题！让你的代码更干净。此外，在样式表的最末端有一个额外的结束括号

有多种方法可以做到这一点，但这一种方法对您有效吗

body, html {
    height: 100%;
}
#fullcover{
    background-image: url(http://2.bp.blogspot.com/-eL9c6lkgTfA/TYgOwVna0WI/AAAAAAAAA8I/DpU04ZImGF8/s1600/beautiful%2Bfish3.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    max-height: 60%;
    height: 100%;
}

---

您可以尝试以下方法：

#fullcover{
position:absolute;
background-image: url(http://2.bp.blogspot.com/-eL9c6lkgTfA/TYgOwVna0WI/AAAAAAAAA8I/DpU04ZImGF8/s1600/beautiful%2Bfish3.jpg);
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
max-height: 60%;
z-index:-1;
}

这会将文本放置在鱼图像的顶部，如果您希望它位于鱼图像的下方，请执行以下操作：

.text {

  color:#000;
  margin-top:25%;


  }

---

我不太明白。类似这样的东西？使用z-index-10000；为了你的text@j08691与此完全相同，但我并不真正喜欢覆盖html和body@SalvadorDali为什么不呢？如果你想让你的网站在所有浏览器中看起来都一样，你需要使用css重置。你不必覆盖你的html和正文规则（除非它们已经有高度）。您只需添加高度规则，填充/边距是可选的。这正是我希望它的外观。唯一的问题是，我宁愿不覆盖html和主体标记。如果您不覆盖任何内容，我甚至建议使用css重置

.text {

  color:#000;
  margin-top:25%;


  }