Achtergrond-bijlage - CSS-trucs

De background-attachmenteigenschap in CSS geeft aan hoe de achtergrond moet worden verplaatst ten opzichte van de viewport.

Er zijn drie waarden: scroll, fixed, en local. De beste manier om dit uit te leggen is via een demo (probeer door de individuele achtergronden te scrollen):

Bekijk de demo van de Pen Background attachment door Timothy Miller (@tjacobdesign) op CodePen.

Er zijn twee verschillende weergaven om over na te denken background-attachment: de hoofdweergave (browservenster) en de lokale weergave (je kunt dit zien in de demo hierboven).

scrollis de standaardwaarde. Het scrollt met de hoofdweergave, maar blijft binnen de lokale weergave staan.

fixedblijft hoe dan ook vast. Het is zoiets als een fysiek raam: als je door het raam beweegt, verandert je perspectief, maar het verandert niet waar dingen zich buiten het raam bevinden.

localis uitgevonden omdat de standaardwaarde scrollwerkt als een vaste achtergrond. Het scrollt zowel met de hoofdweergave als de lokale weergave. Er zijn een aantal coole dingen die je ermee kunt doen.

Verwant

achtergrond-clip
Achtergrond kleur
achtergrond afbeelding
achtergrond-oorsprong
achtergrond-positie
achtergrond herhaling
achtergrondgrootte

Meer middelen

CSS3 Spec
MDN

Browser-ondersteuning

De fixeden scrollwaarden worden overal ondersteund, hoewel fixedze zich op mobiele apparaten vreemd kunnen gedragen. localheeft deze browser ondersteuning:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.