响应式 Hero-Image 在 iPhone 上不起作用

Question

我的网站存在以下问题：

我有一个带有背景图片的英雄部分。它覆盖了背景并使用background-attachmend: fixed。这很有效，在我的桌面上看起来很漂亮。

而在我的 iPhone 上，背景非常模糊，而且背景不是固定的。如果我将其更改为默认值background-attachmend: scroll，则背景会以良好的质量显示图片的右侧部分。

如果背景是固定的，iPhone 上的背景有时会完全变黑，这取决于我是否使用background-size: cover。

我知道 iOS 不喜欢固定背景，但总得有办法解决这个问题吧？

希望你能帮助我！

---

编辑： 我的 <section> "home" 的 Css 代码

width: 100%;
height: 100%;
background-color: #151515;
background-image: url(../images/titelbild-skydance.jpg);
background-repeat: no-repeat;
background-position: bottom 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-attachment: fixed;
min-height: 804px;
position: relative;

Answer 1

对于响应式background-image，请为您的<section> 标签使用以下CSS：

section {

min-height: 800px;
width: 100%;
background-image: url("../images/titelbild-skydance.jpg");
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;

}