Question

我刚刚在手机上测试了我的投资组合网站，并注意到滚动时背景图像会放大和缩小。我已经在Chrome，Safari，Firefox和Edge上进行了测试。 Safari是浏览器，一切正常。我不确定为什么会这样。任何帮助将不胜感激。

我将仅发布目标网页部分的代码，而不是发布整个项目的代码。

相关的HTML

<section class="landing-page">
                <div class="landing-flex-container">
                    <div>
                        <h2 class="">John Cyzeski</h2>
                        <p class="">Welcome, I am a front-end web developer who is passionate about learning and creating</p>
                        <div class="button-container scroll">
                            <h3>
                                <a href="#about">learn more</a>
                            </h3>
                        </div>
                    </div>
                </div>
            </section>

相关CSS

.landing-page {
    /* background-color: var(--powder); */
    background: url('images/pineapple.jpg') center center;
    background-size: cover;
    height: 70vh;
}

.landing-flex-container {
    display: flex;
    height: 70vh;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0, 0.2);
}

.landing-flex-container div {
    width: 80%;
    text-align: center;

}

.landing-flex-container div h2 {
    padding-bottom: 20px;
    color: white;
}

.landing-flex-container div p {
    line-height: 1.5rem;
    padding-bottom: 20px;
    color: white;
}


/***** Media Queries *****/


@media only screen and (min-width: 475px) {

            .landing-flex-container div {
                text-align: left;
            }

            .landing-flex-container div div {
                width: 200px;
            }

}

@media only screen and (min-width: 760px) {
    .landing-page {
        height: 90vh;
    }
    .landing-flex-container {
        height: 90vh;
    }
    .landing-flex-container div div {
        text-align: center;
    }
    .landing-flex-container div h3 {
        display: inline-block;

    }
    .landing-flex-container div h2 {
        font-size: 2.5rem;
    }

    .landing-flex-container div p {
        font-size: 1.2rem;
    }

    .landing-page div h3::before,
    .landing-page div h3::after {
            display: none;
    }
}

@media only screen and (min-width: 1000px) {
    .landing-flex-container div h2 {
        font-size: 3rem;
    }

    .landing-flex-container div p {
        font-size: 1.5rem;
    }

}

@media only screen and (min-width: 1280px) {
    .landing-page {
        height: 100vh;
        width: 80vw;
        float: right;
    }

    .landing-flex-container {
        height: 100vh;
    }
}

同样，Safari似乎是唯一的背景图像似乎不会在滚动时放大和缩小的浏览器。

背景图片滚动放大

0 个答案: