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

【问题标题】：How do I create a fixed background with scroll for a responsive site?如何为响应式网站创建带有滚动条的固定背景？
【发布时间】：2016-05-27 20:20:33
【问题描述】：

我有一个响应式网站，其中每个交替部分都有一个固定的背景图像，并且内容应该在图像上滚动。现在，在 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>

谢谢

【问题讨论】：

需要你的 HTML 和周围元素的 CSS
对不起！为该部分添加了代码。
我认为你可能需要展示更多的代码，特别是响应式的东西，因为我感觉这就是导致图像缩放不良的原因。
我已经删除了所有响应式的东西，我发现问题是图像缩放到整个页面而不是部分，但它只发生在 iOS 上。

标签： html ios css responsive

【解决方案1】：

问题似乎是由您设置的 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 实际上引用了 existing Stack Overflow question 作为解决方法。

希望这会有所帮助:)

【讨论】：