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

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

我该如何解决这个问题？ 我尝试更改位置值，但我想这可能与width-property有关。这次试错并没有让我走得太远。

Answer 1

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

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

这就是为什么它不在移动设备上工作的原因。请解决这个问题。

或者，您可以在#banner元素中添加内联规则background-attachment:fixed。

请参阅下面的截图（取自chrome dev工具）：