Der feste Hintergrundinformationshack

Möchten Sie einen festen Hintergrund, der während des Scrollens eingestellt bleibt? background-attachment: fixed in mobilen Browsern häufig fehl. Hier ist eine Problemumgehung, ein "Hack", um diesen Effekt zu erzielen.

Das Problem

Lassen Sie uns das Problem mit zwei Hintergrundtypen untersuchen: lineare Gradienten und Bilder.

Linearer Gradient

Für einen festen Gradienten bei Scroll können wir dieses CSS verwenden:

 Körper {
  Hintergrund: Linear-Gradient (335 Grad, RGBA (255.140,107,1) 0%, RGBA (255.228,168,1) 100%);
  Hintergrundantrieb: behoben;
  Hintergrundposition: Zentrum;
  Hintergrundrepeat: No-Repeat;
  Höhe: 100VH;
}

Auf Android -Chrom und Firefox, die Gradienten -Schriftrollen, dann springen. Dies scheint mit der Schwierigkeit des Browsers verbunden zu sein, den Gradienten in Echtzeit neu zu rendern, wenn sich der URL-Balken versteckt/erscheint. iOS Safari zeigt ein ähnliches Verhalten.

Hintergrundbild

Das Problem ist mit Bildern gleich:

 Körper {
  Hintergrund: URL (../ Assets/test_pic.jpg);
  Hintergrundrepeat: No-Repeat;
  Hintergrundgröße: Cover;
  Hintergrundposition: Zentrum;
  Hintergrundantrieb: behoben;
  Höhe: 100VH;
}

background-attachment: fixed ignoriert auch die Höhe height , die Position relativ zum Ansichtsfenster berechnet, nicht die Höhe des Elements. Dies könnte daran liegen, dass background-attachment: fixed das kleinste Ansichtsfenster verwendet, während Elemente die größten verwenden. Ansichtsfenster -Einheiten (VH) Die Größe nicht ändern, wenn sich die URL -Balken -Sichtbarkeit ändert.

caniuse hebt Browser-Inkonsistenzen mit background-attachment: fixed .

Die Lösung (ein Hack)

Die Lösung beinhaltet die Entfernung background-attachment: fixed und verwenden separate Elemente. Wenn background-attachment: fixed das kleinste Ansichtsfenster verwendet, verwenden wir ein Element, das das größte verwendet.

Erstellen Sie zwei Divs: eine für den Hintergrund und eine für Inhalte:

<div class="bg"></div>
<div class="content">
  
</div>

Style sie so:

 .bg {
  Hintergrund: Linear-Gradient (335 Grad, RGBA (255.140,107,1) 0%, RGBA (255.228,168,1) 100%);
  Hintergrundrepeat: No-Repeat;
  Hintergrundposition: Zentrum;
  Höhe: 100VH;
  Breite: 100VW;
  Position: fest;
  Z -Index: -1; / * Optional */
}

.Inhalt {
  Position: absolut;
  Rand: 5REM;
  Links: 50%;
  Transformation: Translatex (-50%);
  Breite: 80%;
}

Dies funktioniert ähnlich für Hintergrundbilder:

 .img {
  Hintergrund: URL ('../ Assets/test_pic.jpg');
  Hintergrundposition: Zentrum;
  Hintergrundrepeat: No-Repeat;
  Hintergrundgröße: Cover;
  Position: fest;
  Höhe: 100VH;
  Breite: 100VW;
}

Während ein kleines Scrollen auftreten kann, wenn sich die URL -Stange versteckt, werden die Hauptprobleme gelöst.

Überlegungen

Dieser "Hack" verwendet a<div> statt eines<code><img alt="Der feste Hintergrundinformationshack" > Tag, das sich auf die Semantik und Zugänglichkeit auswirken kann. Wenn das Bild für die Bedeutung von entscheidender Bedeutung ist, verwenden Sie eine<img alt="Der feste Hintergrundinformationshack" > Mit dem richtigen alt -Text ist besser, auch wenn der Hack nicht perfekt funktioniert. Eine untere Navigationsleiste, die automatisch immer noch zu Problemen führen kann. In solchen Fällen kann JavaScript erforderlich sein.

Das obige ist der detaillierte Inhalt vonDer feste Hintergrundinformationshack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!