Question

我希望我的背景图像保持在同一个位置。所以我利用了

background-attachment:fixed;

当我发现iOS显然不支持此属性时，我决定将固定的背景div添加到DOM中。这实际上很有效：

#background {
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:fixed;
    background-position:50% 0%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-image:url("images/mark-bg.png");
}

初看起来，这在iOS中也很有用。但后来我认识到，如果它不能被修复，Safari会将DIV向上滚动到滚动的位置。

现在我问自己»到底是什么......？！«我的意思是......为什么iOS会滚动一个明确告知不要这样做的元素？

有智能解决方案吗？

Here is a complete Demo

修改

我刚刚发现，元素不会移动，但背景图像会移动......

Answer 1

我找到了一个非常不理想的解决方案，但至少它有效。我不再在CSS中使用background-image，而是在背景div中添加img标记，并将其置于绝对位置：

#background img {
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
}

Here is the fiddle

不幸的是，段落＆＃34;这是文字＆＃34;不再是可见的。幸运的是，这只是为了背景......

~~此外图像不再居中，~~也未正确调整大小：[

修改

我添加了以下CSS来修复定位：

#background img { margin-left:auto; margin-right:auto; }

Answer 2

朱利安的回答对我很有帮助。

它解决了部分问题，即通过用固定位置div中的静态图像替换它来防止滚动背景图像，避免Safari对“背景附件：固定”的错误解释。

但它给我留下了一个我无法在视口中居的图像，使得图像的中心始终位于视口的中心。

这通常是背景位置：50％50％和背景大小：封面，但是当我们根本没有背景图像时则不行。

所以我用一个具有类似设置的<img>替换了Julian的内部<div>。

然后我将背景图像和属性添加到该div中，除了我遗漏的背景附件。

这导致一个占用整个视口的div并被固定到视口，并且有一个子div完全填充它，并且该子div有一个静态背景图像设置在50％/ 50％和大小的位置盖

效果很好！

我的内部div样式如下：

#div_background > div
{
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    right: 0px;
    bottom: 0px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;

    background-image: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

使用父div样式如下：

#div_background
{
    display: inline-block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    right: 0%;
    bottom: 0%;
    z-index: -1;
    background-color: #A0B4C8;
}

HTML就是：

<div id="div_background"><div></div></div>

我认为这是一个hacky解决方案，但由于Safari的错误，这是一个必要的解决方案。

一种简单的思考方式是，我们不是使用固定的背景附件，而是创建我们自己的固定背景并手动将新的div与背景图像相关联。

谢谢，朱利安！

定位固定时iOS会移动背景图像

2 个答案: