包装器中的视差背景图像无响应

Question

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

现在，我的问题：

我在部分元素内使用视差背景图像，它在移动设备上没有响应。如果我调整浏览器窗口的大小，它可以正常工作。但是，如果我查看智能手机屏幕上的实际尺寸，它就无法正常工作。

这是我在 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。

Answer 2

媒体样式规则之一是覆盖文件中的background-attachment: fixed;：leistungen-banner.css

@media screen and (max-width: 1280px)
    #banner {
        padding: 6em 0 3em 0;
        background-attachment: scroll;
     }
}

这就是它无法在移动设备上运行的原因。请解决这个问题。

或者，您可以将规则background-attachment:fixed 添加并内联到您的#banner 元素。

参考下面的截图（取自 chrome 开发工具）：