Question

我很难让它显示出应有的样子。

我的html代码中的两个div均按“正确”顺序排列，当我在线查找时，找不到任何解决方案。

<body>
    <div class="homeCard">
        <div class="homeCardTitle">
            <h1>Robin Riezebos</h1>
        </div>
    </div>
    <div class="aboutCard">
        <div class="aboutCardText">
            <h2>About</h2>
        </div>
    </div>
</body>

我的CSS丢失了某些东西，或者我做了完全错误的事情，但是我似乎找不到答案，所以请帮忙...

index.css

.homeCard {
    background-image: url("images/helicopter-in-sky-2.jpg");
    height: 100%;
    width: 100%;
    position: fixed;
    float: left;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.homeCardTitle {
    position: fixed;
    width: 100%;
    height: 320px;
    top: 50%;
    margin-top: -160px;
    color: white;
    text-shadow: 0 0 10px black;
}
.aboutCard {
    background-color: #1F1F1F;
    color: white;
    height: 500px;
}

Answer 1

请像下面那样更改css，我认为问题在于位置固定，如果要完全渲染背景图像，请分别设置高度像素。

it.next(..)

Answer 2

我通过在CSS中四处浏览找到了解决方案。原来不是position: fixed;，我应该使用background-attachment: fixed;并一起删除position。

这是我自己的固定代码：

.homeCard {
    background-image: url("images/helicopter-in-sky-2.jpg");
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    float: left;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.homeCardTitle {
    position: relative;
    width: 100%;
    height: 0px;
    top: 50%;
    margin-top: -90px;
    color: white;
    text-shadow: 0 0 10px black;
}
.aboutCard {
    width: 100%;
    background-color: #1F1F1F;
    color: white;
    height: 320px;
    float: left;
    text-align: center;
}

视差滚动页排列奇怪

2 个答案: