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：

*** EDIT 我已经拿出了所有的响应式内容，我发现问题是图像缩放到整个页面而不仅仅是应该包含的部分，但它只在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;属性组合引起的。

注意：为了澄清其他人可能正在阅读此内容并思考＆＃34;我无法在OP＆＃39中看到background-attachment: fixed;属性问题......＆＃34;。此属性已在background: ... no-repeat top center fixed;中内嵌设置。你可以看到它是最后设置的最后一个属性。

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

希望这有助于：）

如何使用滚动创建具有响应式网站的固定背景？

1 个答案: