Question

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

看一些网站正在做我想做的事情（比如www.novactive.ca/en），我意识到当我调整浏览器大小时，图像的高度正在调整。我不知道这是怎么做的，但我怀疑有一些javascript参与......

所以我想知道我是否一直在尝试这种方法，或者是否有更好，更简单的方法来实现这一目标？

Answer 1

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

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

Answer 2

我建议使用flexbox。（Handy guide。）它允许你在不知道高度的情况下居中。它是现代的，并且得到所有主流浏览器的支持（但是，在CSS行之前，Safari仍然需要-webkit-标志......）。

您可以设置容器的高度和宽度以覆盖整个页面（使用viewport units）并显示flex。然后，使用align-items和justify-content属性将其居中。像这样：

＆＃13;

.container {
    height: 100vh;
    width: 100vw;
    background: #ccc url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.container > div {
    width: 200px;
    height: 200px;
  
    -webkit-flex: 1;
    flex: 1;
  
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

＆＃13;

<html>
    <body>
        <div class="container">
            <div>Some text</div>
        </div>
    </body>
</html>

＆＃13;

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

2 个答案: