Hintergrund-Anhang - CSS-Tricks

Die background-attachmentEigenschaft in CSS gibt an, wie der Hintergrund relativ zum Ansichtsfenster verschoben werden soll.

Es gibt drei Werte: scroll, fixed, und local. Der beste Weg, dies zu erklären, ist eine Demo (versuchen Sie, die einzelnen Hintergründe zu scrollen):

Siehe die Demo zum Stifthintergrund-Anhang von Timothy Miller (@tjacobdesign) auf CodePen.

Es gibt zwei verschiedene Ansichten, über die Sie nachdenken müssen background-attachment: die Hauptansicht (Browserfenster) und die lokale Ansicht (Sie können dies in der obigen Demo sehen).

scrollist der Standardwert. Es wird mit der Hauptansicht gescrollt, bleibt jedoch in der lokalen Ansicht fixiert.

fixedbleibt fest, egal was passiert. Es ist wie ein physisches Fenster: Wenn Sie sich im Fenster bewegen, ändert sich Ihre Perspektive, aber es ändert sich nicht, wo sich Dinge außerhalb des Fensters befinden.

localwurde erfunden, weil der Standardwert scrollwie ein fester Hintergrund wirkt. Es wird sowohl mit der Hauptansicht als auch mit der lokalen Ansicht gescrollt. Es gibt einige ziemlich coole Dinge, die man damit machen kann.

verbunden

Hintergrund-Clip
Hintergrundfarbe
Hintergrundbild
Hintergrundherkunft
Hintergrundposition
Hintergrund Wiederholung
Hintergrundgröße

Mehr Ressourcen

CSS3 Spec
MDN

Browser-Unterstützung

Die fixedund scroll-Werte werden überall unterstützt, fixedkönnen sich jedoch auf Mobilgeräten seltsam verhalten. localhat diese Browser-Unterstützung:

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.