CSS Background (Sfondo)

Le proprietà di sfondo CSS vengono utilizzate per definire lo stile di sfondo dell'elemento. CSS Sfondo si riferisce all'impostazione delle proprietà di sfondo degli oggetti tramite CSS, come l'impostazione di vari stili di sfondo tramite CSS.

Proprietà di sfondo

Le proprietà di stile CSS per un elemento forniscono alcune proprietà come:background-color,background-image,background-repeat,background-attachmentebackground-position. La sezione successiva introdurrà come utilizzare queste proprietà per impostare stili diversi di sfondo.

Colore di sfondo

background-colorl'attributo viene utilizzato per impostare il colore di sfondo dell'elemento.

L'esempio seguente dimostra come impostare il colore di sfondo del sito web.

body {background-color: #f0e68c;}

I colori CSS sono solitamente specificati nei seguenti modi:

• Valori esadecimali come "#ff0000"

• Valori RGB come "rgb(255,0,0)"

• Nomi di colore come "rosso"

VisualizzaNomi di colore CSSper ottenere l'elenco completo dei nomi di colore possibili.

Immagine di sfondo

background-imagel'attributo imposta l'immagine di sfondo dell'elemento HTML.

Vedere l'esempio seguente, che dimostra come impostare l'immagine di sfondo della pagina.

body {background-image: url("leaf.jpg");}

Ripetizione di sfondo

Per impostazione predefinita, ilbackground-imageripeti l'immagine sia in orizzontale che in verticale.

Utilizzando l'attributobackground-repeatl'attributo, puoi controllare come ripetere l'immagine di sfondo dietro l'elemento HTML. Puoi impostare la ripetizione verticale (asse y), orizzontale (asse x), bidirezionale o bidirezionale.

Vedere l'esempio seguente, che dimostra come impostare lo sfondo sfumato del sito web utilizzando la ripetizione orizzontale delle immagini.

body　{
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

Allegato di sfondo

background-attachmentl'attributo determina se l'immagine di sfondo è fissa rispetto al viewport o scorre insieme al blocco contenitore.

body　{
　　　　width: 250px;
　　　　height: 200px;
　　　　overflow: scroll;
　　　　background-image: url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

Posizione di sfondo

background-positionl'attributo viene utilizzato per controllare la posizione dell'immagine di sfondo.

Se nonbackground-positionSe non specificato, l'immagine verrà posizionata nella posizione predefinita in alto a sinistra dell'elemento, ovvero(0,0)Vedere l'esempio seguente:

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

Nell'esempio seguente, l'immagine di sfondo si trova nell'angolo in alto a destra e la posizione dell'immagine è determinata dabackground-positionattributi specificano.

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

Abbreviazione degli attributi di sfondo

Dal esempio sopra si può vedere che quando si gestisce lo sfondo, è necessario considerare molte proprietà. Può anche specificare tutti questi attributi in un singolo attributo per abbreviare il codice. Questo si chiama attributo abbreviato.

delbackgroundAttributi sono utilizzati per impostare tutti gli attributi di sfondo singoli (cioè, attributi abbreviati)background-color,background-image,background-repeat,background-attachmentebackground-position）In una. Ad esempio:

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

Utilizzando il simbolo di abbreviazione, l'esempio sopra può essere scritto come:

body　{background:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

UtilizzarebackgroundQuando si utilizza l'attributo abbreviato, l'ordine dei valori dell'attributo dovrebbe essere.

Sfondo:Colorato Immagine Ripetizione Accessorio Posizione ;

Se si utilizza il simbolo di abbreviazione e manca o non viene specificato il valore di un singolo attributo di sfondo, verrà utilizzato il valore di default di quell'attributo (se esiste).