如何为响应式网站创建带滚动条的固定背景？

Question

我有一个响应式网站，其中每个交替部分都有一个固定的背景图像，并且内容应该在图像上滚动。现在，在 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。例如。 'about' 部分的背景图像正在缩放以覆盖所有三个部分，然后背景的放大部分显示在第一部分中。如果我删除其他部分，图像会缩小到正确的大小。

<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>

谢谢

Answer 1

问题似乎是由您设置的 background-attachment: fixed; 和 background-size: cover; 属性共同引起的。

注意： 为可能正在阅读本文并思考的其他人澄清 "I can't see the background-attachment: fixed; property in the OP's question..."。此属性已在 background: ... no-repeat top center fixed; 中内联设置。可以看到最后设置的是最后一个属性

回到 OP 的问题： iOS 存在阻止 background-size: cover; 和 background-position: fixed; 一起使用的问题。 caniuse.com actually cites an existing Stack Overflow question 作为解决方法。

希望这对您有所帮助:)

如何为响应式网站创建带滚动条的固定背景？

How do I create a fixed background with scroll for a responsive site?

html

css

ios

responsive