手机上的背景图片拉伸或不显示答案

【问题标题】：Background image on mobile stretched or not showing手机上的背景图片拉伸或不显示
【发布时间】：2023-04-08 08:55:01
【问题描述】：

大家好，
我真的不知道该怎么办了。我已经阅读了这些主题并尝试了几乎所有我认为可行的方法，但没有！

就这样：我的背景图像在桌面浏览器上正常显示并调整大小，但在我的手机（在本例中为 iPhone 6S）上它被拉伸（看起来有点模糊）或根本不显示。

链接到我的页面 (http://lauramaliqi.com/about.html)

我的代码（我添加了 H1 和 p - 以防它们影响上层代码。此代码也用于所有其他页面，也提供与此相同的结果。）

.top-bar-about { 
 color: #333;
 height: 350px;
 padding: 100px 0 10px;
 background: -webkit-linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/laura_background1.jpg);
background: linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/laura_background.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center center;
text-align: center;}

.top-bar-about h1 { 
    font-size: 35px;
    font-weight: 400;
    color: #999;
    line-height: 50px;
    display: inline-block;
    text-align: center;}

.top-bar-about p { 
    font-size: 22px;
    font-weight: 300;
    color: #999;
    line-height: 10px;
    font-family:'Walter Turncoat', sans-serif;}

我已尝试更改背景附件：固定为滚动；更改了背景图像的大小，因为我在其中一篇文章上读到了也可能是问题的帖子。玩了@media 查询 - 没有结果。放下不重复，然后它会与我的桌面图像混淆..基本上无论我尝试了什么它都不起作用。

只是补充一下，我知道有时缓存可能是浏览器中的一个错误，但是当我上传新文件但在手机上时，我总是删除缓存..那该死的图片只是没有反应。它就像它的冻结。

提前谢谢你！

附言我还做了一些截图以防万一

应该如何

目前情况如何

【问题讨论】：

你能不能开始一个小提琴，你的链接在移动 chrome 浏览器和 firefox 上工作正常。它按预期工作。

标签： css image mobile background-image

【解决方案1】：

刚刚检查了我的 iOS 10 设备，发现这是因为

 background-attachment: fixed;

再次尝试将移动设备的值从“固定”更改为“滚动”：

@media (max-width: 991px) {

 .top-bar-about{
    background-attachment: scroll;
    padding: 254px 0px !important;
 }

}

并确保样式不会被缓存并且不会相互覆盖。

With background-attachment: fixed;

Width background-attachment: scroll;

【讨论】：