我是新来的并已注册，因为我无法在现有的踏板中找到答案。
我正在尝试制作一个一页的网站，并且我希望“目标网页”具有完整的背景。我在整个页面上都有背景，但是当我开始在div中放置文本时，它坏了。我使用了以下css（sass）：
.intro {
color: #fff;
height: 100vh;
background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center;
background-size: cover;
&--buttons {
position: absolute;
bottom: 2em;
}
}
p.hello {
margin: 30px;
}
.page1 {
color: #fff;
height: 100vh;
background: beige;
}
.page2 {
color: #fff;
height: 100vh;
background: black;
}
使用以下HTML：
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My title</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="intro" class="intro">
<div class="text-center">
<p class="hello">
Intro text is coming soon!
</p>
<div class="col small-col-12 intro--buttons">
<p>Buttons coming here.
</p>
</div>
</div>
</div>
<div id="page1" class="col col-12 page1">
<p>Tekst test</p>
</div>
<div id="page2" class="col col-12 page2">
<p>Tekst test.</p>
</div>
</div>
</div>
</body>
</html>
您可以在这里查看结果：http : //codepen.io/Luchadora/full/waYzMZ或看我的笔：http : //codepen.io/Luchadora/pen/waYzMZ
如您所见，在放置介绍文字（时p.hello {margin: 30px;}，背景大小已更改并且不再是全屏显示。（顺便说一句：我使用的是示例背景）。现在其他页面也有空白。.
我怎样才能解决这个问题？我已经阅读了有关视口的文章，但是我认为我唯一需要的是height: 100vh;，对吗？提前致谢！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句