Question

我使用以下CSS来固定固定的身体背景。除了新的iOS7之外，它几乎适用于所有浏览器。在后者上，背景不再固定。它随页面滚动。知道如何解决这个问题吗？

body
{
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg');
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;     
}

CHEERS

Answer 1

我会尝试找一些参考资料，但移动浏览器会强制background: scroll，因为重新绘制太贵了。

参考：

CSS - Background images not displaying properly on mobile browsers

@PaulIrish也注意到了这一点：

固定背景具有巨大的重绘成本和抽取滚动性能，我相信，这是为什么它被禁用。

虽然有很多方法可以解决这个问题，但这不是一个快速修复方法。看看下面的问题及其评论。

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

Answer 2

您也可以使用Backstretch jquery。

它并不重，在iOS 7上运行良好。

Answer 3

我建议查看滚动条（https://github.com/Prinzhorn/skrollr）。它是一个视差库，可以让您达到同样的效果。他们也仔细考虑过移动设备的问题：

为什么这是一个重要的里程碑以及为什么其他人失败的一些话：移动浏览器试图在任何可能的地方节省电池。这就是移动浏览器在滚动时延迟执行JavaScript的原因。特别是iOS非常积极地完成这项工作并完全停止了JavaScript。简而言之，这就是为什么许多滚动库无法在移动设备上运行，或者它们带有自己的滚动条，这是桌面上的可用性噩梦。这是一个重要的要求，当我开发skrollr时，我不会强迫你滚动我想要的方式。桌面上的skrollr使用本机滚动条，您可以按照您想要的方式滚动（键盘，鼠标等）。

你刚刚告诉我它在手机上不起作用，但为什么呢？答案很简单。在移动设备上使用skrollr时，实际上并不滚动。当检测到移动浏览器时，skrollr会禁用本机滚动，而是使用CSS转换来侦听触摸事件并移动内容（更具体地说是#skrollr-body元素）。

以下是经典视差背景实现的示例： http://prinzhorn.github.io/skrollr/examples/classic.html

在示例页面上，另一个宝石值得注意：

在没有JavaScript的情况下降级（可以在移动设备上禁用而不会破坏所有内容）。

Answer 4

升级到iOS7时，我注意到了背景附件问题。我不得不使用Javascript来解决这个问题，因为我无法找到单独使用CSS的解决方案。

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}

Answer 5

在解决了解决这个问题的所有方法之后，我有一个非常简单的解决方案。

我在移动IOS设备上遇到了问题。

css （桌面）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

然后我用媒体查询覆盖它，删除“fixed”作为背景附件。

css （移动）

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - 将此属性设置为其默认值。我认为因为IOS不接受'固定'它会回退到它接受的默认值，滚动。

这适用于我的每台设备。希望它也可以帮助其他人。

Answer 6

我遇到了与您相同的问题，并为此苦苦挣扎了近三天。但是从2020年6月开始，我发现这是一个可靠的解决方案，适用于所有设备，并且具有100％的浏览器兼容性。它可以在页面的任何位置（而不只是页面的顶部或底部）提供所需的效果，并且您可以根据需要创建任意数量的

。

到目前为止，唯一已知的问题是野生动物园。浏览器在每次滚动运动时都会重新绘制整个图像，因此给图形带来了沉重负担，并且大多数时候使图像上下闪烁约10像素。字面上没有解决办法，但我认为也没有更好的答复。

我希望这对您有用。您可以在www.theargw.com中实时查看结果，其中有三张不同的固定背景图像。

/* Foo Interface */
class IFoo
{
public:
    virtual void foo() = 0;

    virtual ~IFoo() = default;
};

/* Bar Interface */
class IBar : virtual public IFoo
{
public:
    virtual void bar() = 0;

    virtual ~IBar() = default;
};

/* A specialized Foo */
class SpecificFoo : virtual public IFoo
{
public:
    void foo() override { std::cout << "Foo!\n"; }
};

/* A specialized Bar */
class SpecificBar : virtual public IBar, virtual public SpecificFoo
{
public:
    void bar() override { std::cout << "Bar!\n"; }
};

int main()
{
    SpecificBar b;

    b.bar();

    return 0;
}

body, .black {
  width: 100%;
  height: 200px;
  background: black;
}

.e-with-fixed-bg {
  width: 100%;
  height: 300px;
  
  /* Important */
  position: relative;
}

.bg-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  transform: translateZ(0);
  will-change: transform;
}

.e-container {
  z-index: 1;
  color: white;
  background: transparent;
}

---------------------编辑--------------------- 发布的代码缺少背景包装程序，该包装程序不允许背景大小更改并保持固定位置。抱歉今天早上发布错误的代码！但这是零钱。

Answer 7

我一直在搜索，并在github上使用了Prinzhorn解决方案的基础知识。谢谢，因为它完美无缺。我只有一个背景图像显示在每个设备上，除了iPad，现在图像背景附加=固定和图像背景大小：封面。

Answer 8

考虑背景尺寸的问题，我发现如果您的桌面尺寸可以覆盖并且位置可以固定，那么在媒体查询上进行background-size: 100% 100vh

我在another question here.

上发布了答案

固定的身体背景与iOS7上的页面滚动

8 个答案: