0

我有一个响应式站点，其中每个交替部分都有一个固定的背景图像，并且内容应该在图像上滚动。现在，在 iOS 上，它会放大图像的一小部分并将其放大以适应内容 div（我基本上以灰色的大背景结束）。我怎样才能使固定背景上的滚动部分也能在 iPhone 浏览器上工作？

这是我当前的背景代码：

.scroll-background {
  background: url("../imgs/misc.jpeg") no-repeat top center fixed;
  background-size: cover;
}
.scroll-background2 {
  background: url("../imgs/misc2.jpeg") no-repeat top center fixed;
  background-size: cover;
}
.center{
  padding: 0 2em;
  margin: 0;
  position: relative;
  top: 50%;
}

和html：

***编辑我已经删除了所有响应式的东西，我发现问题在于图像正在缩放到整个页面，而不仅仅是应该包含的部分，但它只发生在在 iOS 上使用浏览器。例如，“关于”部分的背景图像正在缩放以覆盖所有三个部分，然后背景的放大部分显示在第一部分中。如果我删除其他部分，图像会缩小到正确的大小。

<body id="top">
      <section id="about">
        <div class="scroll-background center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
            </p>
        </div>
      </section>

      <section id="skills">
        <div class="center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
            </p>
        </div>
      </section>

      <section id="portfolio">
        <div class="scroll-background2 center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
            </p>
        </div>
      </section>
    </body>

谢谢

4

1 回答 1

0

看起来问题是由您设置的background-attachment: fixed;和属性的组合引起的。background-size: cover;

注意：为了澄清其他可能正在阅读本文并认为“我在 OP 的问题中看不到该background-attachment: fixed;属性......”的人。此属性已在background: ... no-repeat top center fixed;. 您可以看到它是最后设置的最后一个属性。

回到 OP 的问题： iOS 存在阻止background-size: cover;和background-position: fixed;不能一起使用的问题。 caniuse.com实际上引用了一个现有的 Stack Overflow 问题作为解决方法。

希望这会有所帮助:)

于 2016-05-27T12:20:33.630 回答