移动设备上的背景图像问题-解网

问：

我有一个网站，其中有一个使用背景图像的英雄部分。为了针对移动设备优化网站，我使用 CSS 媒体查询专门为移动屏幕设置了不同的背景图像。当我在 Chrome 开发者工具中使用移动视图测试网站时，它看起来是正确的。但是，当我在真实的移动设备（例如 iPhone 14 Pro Max）上查看它时，背景图像无法正确显示。

这是我的 HTML 和 CSS 代码：

`<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1 class="main-title ani-fade-up">ADER BOYA</h1>
            <p class="main-slogan ani-delay ani-fade-up">Projelerinizi Gerçekleştirelim Renginizi Keşfedin!</p>
            <div class="arrows ani-delay2 ani-fade-up">
                <a href="#">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>
        </div>
    </div>
</section>`

`/* Hero Section */
#hero {
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/heroback.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

/* Media Queries */
@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-attachment: fixed;
    }
}`

出现在我的手机上：我希望它是 Github 链接：https://github.com/Codekod/aderboya

我使用媒体查询为移动设备添加了不同的背景图像，它在 Chrome DevTools 中看起来不错。在 iPhone 14 Pro Max 等真实移动设备上查看时，可能导致此问题的原因是什么？我的 CSS 或 HTML 中缺少什么吗？

CSS 后台媒体查询

@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(../img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-attachment: fixed;
    }
}

感谢您的关注和帮助。我的问题不是图像不可见。我为移动设备的 Hero 部分分配了不同的图像。当我最小化计算机上的浏览器并在 Chrome Developer 上选择移动设备时，此图像看起来是正确的，但是当我用手机打开它时，图像的一部分会出现并且没有覆盖整个图像。

0赞 Oscar Raizer 10/28/2023

现在我明白了，是的，至少修复在我的 iPhone 上不起作用）也许这篇文章会对您有所帮助： kriesi.at/support/topic/ios-do-not-support-fixed-backgrounds

0赞 Melih 10/28/2023

你很棒，非常感谢，我的问题解决了。“background-attachment： scroll ！important;” 这一行解决了我的问题

上一个：媒体查询对奇怪的值生效

下一个：在移动设备或 iPad 上将方向从纵向切换到横向时，网站两侧会出现空白

移动设备上的背景图像问题

Background Image Issue on Mobile Devices

评论

评论