html - 响应式英雄形象不适用于 iPhone

Question

我的网站存在以下问题:

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

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

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

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

希望你能帮助我!

---

编辑: 我的 <section> 的 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;

}