Hintergrundbilder können auf dem iPad nicht angezeigt werden.

Question

Ich habe ein Hintergrundbild unter der Navigationsleiste platziert, damit sich die Navigationsleiste beim Scrollen nach unten mitbewegt. Aber wenn ich es auf meinem iPad betrachte, sehe ich, dass das Hintergrundbild dunkelblau erscheint, fast schwarz.

.background__image {
  Breite: 100 %;
  Hintergrundbild: url("https://background-image.jpg");
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrundposition: Mitte Mitte;
  Hintergrundanhang: behoben;
  Hintergrundgröße: Cover;
  Höhe: 800px;
  Textausrichtung: Mitte;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
}

Answer 1

.background__image {
  width: 100%;
  background-image: url("https://background-image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  height: 800px;
  text-align: center;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  /* Adjust the max-width value as needed */
  .background__image {
    background-attachment: scroll;
  }
}

尝试使用媒体查询设置最大宽度为768px（根据您的需求进行调整），以针对较小的屏幕，如iPad或其他移动设备。在媒体查询内部，将background-attachment属性设置为scroll，使背景图片能够随内容在这些设备上一起滚动。