时间戳

首页 > 解决方案 > 背景图像在移动屏幕上显示为放大

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

问题描述

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

手机上的 Chrome

手机上的铬

这是我在 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>

我非常感谢您的帮助！

标签： cssbackground-imageviewport

解决方案

IOS Safari，因此 IOS Chrome，不支持固定在后台。请参阅https://caniuse.com/?search=fixed

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

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

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

推荐阅读