背景图像在移动屏幕上显示为放大

Question

我正在为学校构建一个项目，但我遇到了背景图片问题。我已使用此代码 sn-p 来执行此操作（https://css-tricks.com/perfect-full-page-background-image/），它在桌面和 Chrome 开发工具（即用于移动设备）上运行良好。当我在手机上的 Chrome 或 Safari 上打开我的网站时，它无法正常工作。截图如下：

Chrome on Phone

Chrome on phone

这是我的 CSS 代码：

.container-hero {
height: 100vh;
width: 100%;
background: url("../images/hero-image.jpg") no-repeat center center fixed;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

}

<div class="container-fluid container-hero">
        <div class="row">
            <div class="col-12">
                <div class="hero-j jumbotron text-center text-uppercase text-white">
                    <div class="container">
                        <h1 class="display-4 section-header">Be a hero.</h1>
                        <hr class="block-divider--white">
                        <p class="hero-j text"> At Doug's, we <strong>Evolve</strong> together.</p>
                        <a href="#signup" class="btn btn-lg button-signup">
                        Sign me up!
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

非常感谢您的帮助！

Answer 1

IOS Safari 和 IOS Chrome 不支持固定在后台。见https://caniuse.com/?search=fixed

我用我自己的图像尝试了你的 CSS，结果很模糊。从这个声明中去掉固定就很清楚了。

background: url("https://ahweb.org.uk/gear.jpg") no-repeat center center;

如果不知道代码的确切布局，很难知道这是否足够，或者您是否必须将图像取出作为另一个容器的背景，以便它始终保持在视图中，如果这是什么是必需的。