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，身体100％。

Answer 1

Updated fiddle

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

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

Answer 2

添加：

html, body {
    margin:0;
    padding:0;
    height:100%;
}

并删除：

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

那应该解决这个问题！并使您的代码更清洁。此外，在样式表的最后还有一个额外的结束括号

Answer 3

有多种方法可以做到这一点，但这个方法适合你吗？

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%;
}

Demo here

Answer 4

您可以尝试以下操作：

#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%;


  }

如何在封面图片下方放置文字？

4 个答案: