css - 包装器中的视差背景图像没有响应

Question

我使用 HTML5 模板制作了一个网站并对其进行了调整。到目前为止一切正常(除了可能有杂乱的文件)。

现在，我的问题:

我在 section-element 中使用视差背景图像，它在移动设备上没有响应。如果我调整浏览器窗口的大小，它工作正常。但是，如果我在智能手机屏幕上查看实际尺寸，就会发现它不起作用。

这是我在 CSS 文件中使用的代码。我尝试使用我在该社区中找到的代码来完成此操作，并将其与模板中已有的内容合并。

.wrapper.rechtsgebiete {
    background-color: #ffffff;
    color: rgba(255, 255, 255, 0.75);
    padding: 10em 0 6em 0 ;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    background-attachment: fixed;
    background-color: rgba(51,153,255, 0.80);
    background-image: url(../../images/la-rechtsgebiete.jpg);
    background-position: top left;
    background-size: cover;
    border: none;
    min-height: 50vh !important;
    position: relative;
    text-align: center;
    width: 100%;
        }

这是 HTML 元素:

    <section id="rechtsgebiete" class="wrapper rechtsgebiete" style="padding-top: 30vh; padding-bottom: 25vh;">
    <div class="inner"><center>
    <h1 class="font-volkhov2"><span style="color:white;">Services & Rechtsgebiete</span></h1></center>
    </div>
    </section>

在这里你可以看到问题；第一个标题图像工作正常，其他一切都没有:http://lexadvice.de/leistungen.html

我该如何解决这个问题？ 我尝试更改位置值，但我想这可能与宽度属性有关。这次反复试验并没有让我走得太远。

Answer 1

我通过设置滚动背景解决了这个问题。现在图像可以在 iPhone 上正确显示。

    background-attachment: scroll;

感谢@Akash Shrivastava 的帮助。