javascript - 制作响应式整页的最佳方式？

Question

我正在尝试使用单个图像作为背景制作一个网站，然后在其上添加内容。到目前为止，我能够使用 background-size: cover 来实现这一点，但是当涉及到将我的内容垂直对齐到页面中间时我遇到了很多困难(每个垂直对齐解决方案似乎都涉及高度已知在一些点...)

查看一些正在做我正在尝试做的事情的网站(比如 www.novactive.ca/en)，我意识到当我调整浏览器大小时图像的高度正在调整。我不知道这是如何完成的，但我怀疑涉及一些 javascript ...

所以我想知道我是否一直在正确地尝试这个，或者是否有更好、更简单的方法来实现这个？

Answer 1

使用https://css-tricks.com/perfect-full-page-background-image/ 然后你需要将文本绝对定位在图像的顶部，给它 100% 的宽度和 text-align 居中。用 top 改变垂直高度。

div {
    height: 100vh;
    width: 100%;
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.text {
    position: absolute;
    z-index: 10;
    top: 40vh;
    width: 100%;
    text-align: center;
}