Question

我的网站存在以下问题：

我有一个带有背景图像的英雄区。它涵盖了背景并使用了background-attachmend: fixed。这可以正常工作，并且在我的桌面上看起来非常漂亮。

在我的iPhone上，背景非常模糊并且背景没有固定。如果将其更改为默认值background-attachmend: scroll，则背景将以高质量显示图片的右侧。

如果背景是固定的，则根据我是否使用background-size: cover，iPhone上的背景有时会全黑。

我知道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;

}

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

1 个答案: