Le immagini di sfondo hanno un grande impatto sull'aspetto di qualsiasi sito Web. Quando scorriamo una pagina web/contenuto, allora quale sarà il comportamento dell'immagine di sfondo? Se si muoverà anche con i contenuti o meno.

BENE! Per impostazione predefinita, l'immagine di sfondo scorre con il contenuto. La proprietà di attacco di fondo viene utilizzata specificamente per determinare la risposta dell'immagine di sfondo. Decide il comportamento dell'immagine di sfondo usando i seguenti valori:

• fisso: L'assegnazione del valore fisso all'immagine di sfondo risolverà l'immagine sulla pagina web.
• scorrere: Il valore di scorrimento consente a un'immagine di scorrere con il contenuto.
• Locale: Il valore locale consente a un'immagine di scorrere con il contenuto di un elemento.

Questo articolo fornirà una comprensione dettagliata della proprietà di attacco di background in CSS. Per una migliore comprensione, questo articolo prenderà in considerazione alcuni esempi con diversi valori di attacco di fondo.

Sintassi

Lo snippet seguente descrive la sintassi della proprietà di attacco di fondo

Attacco di fondo: valore

Discutiamo di quali valori possono prendere la proprietà di attacco in background.

valore fisso

IL "fisso" Il valore imposta l'immagine in una posizione specifica. L'immagine non si muoverà con il contenuto.

Esempio

Il codice di seguito dà spiegherà come impostare il fisso valore per la proprietà di attacco di fondo

Html

Immagine di background: fissa

Tutti i contenuti scritti qui!

CSS

corpo
Immagina di background: URL ("Copertura.jpg ");
Ripeat background: no-ripetizione;
Posizione di sfondo: top sinistra;
Attacco di background: fisso;

Il codice sopra genera il seguente output:

L'output chiarisce che l'immagine rimane fissata.

Valore di scorrimento

IL "scorrere" Il valore ci consente di scorrere l'immagine con il contenuto. Per una migliore comprensione considera il codice indicato di seguito:

Html

Immagina di sfondo: scorrimento

Tutti i contenuti scritti qui!

CSS

corpo
Immagina di background: URL ("Copertura.jpg ");
Ripeat background: no-ripetizione;
Posizione di sfondo: top sinistra;
Attacco di fondo: scorrimento;

Il codice sopra produrrà il seguente output:

valore locale

Il valore locale sposta l'immagine con il contenuto dell'elemento. Tuttavia, se si implementa il locale nell'esempio sopra, il risultato apparirà uguale al valore di scorrimento. Quindi, come possiamo differenziare i valori locali e di scorrimento?

La differenza tra i valori locali e di scorrimento può essere notata in uno scenario in cui ci sono più aree scorrevoli su una pagina web.

Esempio

Questo esempio fornirà il codice per il valore locale per le più aree scorrevoli.

Html

Immagina di background: locale

Tutto il contenuto viene qui

CSS

.scatola

larghezza: 500px;
Altezza: 500px;
Margine: 100px;
Bordo: 10px Black solido;
Overflow: auto;
Immagina di background: URL ("Copertura.jpg ");
Ripeat background: no-ripetizione;
Background-Attachment: locale;

L'output del codice sopra indicato sarà così:

Ci sono due barre di scorrimento nell'output sopra. Quando spostiamo una barra di scorrimento i.e. interno o esterno L'immagine si muove con il contenuto.

Nel codice sopra, usa Scroll anziché locale e osserva la differenza.

Scrotola CSS

Attacco di fondo: scorrimento;

Seguendo l'output apparirà per il valore di scorrimento:

Ci sono due barre di scorrimento. Quando scorriamo la barra esterna, l'immagine si muove con il contenuto. E quando scorrere l'immagine della barra interna è rimasta fissata.

Conclusione

La proprietà di attacco di fondo specifica come si comporterà un'immagine di sfondo. Ci vogliono tre valori IE. Risolto, scorrere, locale. "fisso" Per correggere l'immagine in una posizione specifica, "scorrere" Per spostare l'immagine con il contenuto e "Locale" Per spostare l'immagine con il contenuto dell'elemento.

Questo articolo ha presentato una panoramica dettagliata della proprietà di attacco di background. Inoltre, questo articolo ha dimostrato come utilizzare il valore fisso, scorrevole e locale per la proprietà di allegato.