Sfondo-allegato - Trucchi CSS

La background-attachmentproprietà in CSS specifica come spostare lo sfondo rispetto alla visualizzazione.

Ci sono tre valori: scroll, fixed, e local. Il modo migliore per spiegarlo è tramite demo (prova a scorrere i singoli sfondi):

Guarda la demo dell'allegato Pen Background di Timothy Miller (@tjacobdesign) su CodePen.

Ci sono due diverse viste a cui pensare quando si parla background-attachment: la vista principale (finestra del browser) e la vista locale (puoi vederla nella demo sopra).

scrollè il valore predefinito. Scorre con la vista principale, ma rimane fisso all'interno della vista locale.

fixedrimane fisso qualunque cosa accada. È un po 'come una finestra fisica: spostarsi all'interno della finestra cambia la tua prospettiva, ma non cambia la posizione delle cose al di fuori della finestra.

localè stato inventato perché il scrollvalore predefinito agisce come uno sfondo fisso. Scorre sia con la vista principale che con la vista locale. Ci sono alcune cose piuttosto interessanti che puoi fare con esso.

Relazionato

clip di sfondo
colore di sfondo
immagine di sfondo
background-origin
background-position
ripetizione in background
dimensione dello sfondo

Più risorse

Specifiche CSS3
MDN

Supporto browser

I valori fixede scrollsono supportati ovunque, anche se fixedpossono comportarsi in modo strano sui dispositivi mobili. localha questo supporto per il browser:

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.