Sfondo CSS3 (Background)

Con CSS3, è possibile applicare più sfondi agli elementi.

Utilizzo dello sfondo CSS3

CSS3 fornisce diversi nuovi attributi per manipolare lo sfondo degli elementi, come il taglio di sfondo, sfondi multipli e opzioni di regolazione della dimensione dello sfondo.

Nella prossima sezione ti presenteremo tutte le nuove funzionalità di sfondo di CSS3, per altre proprietà correlate allo sfondo, consultaSfondo CSSTutorial.

Attributo background-size di CSS3

L'attributo background-size può essere utilizzato per specificare la dimensione dell'immagine di sfondo. Prima di CSS3, la dimensione dell'immagine di sfondo era determinata dalla dimensione effettiva dell'immagine. La dimensione dell'immagine di sfondo può essere specificata in pixel, percentuale o tramite parole chiave come auto, contain e cover. Non sono ammessi valori negativi.

.box {
　　　　width: 250px;
　　　　height: 150px;
　　　　background: url("images/sky.jpg") no-repeat;
　　　　background-size: contain;
　　　　border: 6px solid #333;
}

Attributo background-clip di CSS3

L'attributo background-clip può essere utilizzato per specificare se lo sfondo dell'elemento si estende al bordo. L'attributo background-clip può prendere tre valori: border-box, padding-box, content-box.

.box {
　　　　width: 250px;
　　　　height: 150px;
　　　　padding: 10px;
　　　　border: 6px dashed #333;
　　　　background: arancione;
　　　　background-clip: content-box;
}

Si prega di consultareModello di box CSSTutorial per ottenere ulteriori informazioni sull'elemento box.

Attributo background-origin di CSS3

L'attributo background-origin può essere utilizzato per specificare l'area di posizionamento dell'immagine di sfondo. Può prendere gli stessi valori dell'attributo background-clip: border-box, padding-box, content-box.

.box {
　　　　width: 250px;
　　　　height: 150px;
　　　　padding: 10px;
　　　　border: 6px dashed #333;
　　　　background: url("images/sky.jpg") no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

Sfondo multiplo CSS3

CSS3 ti permette di aggiungere più sfondi a un singolo elemento. Gli sfondi si sovrappongono gli uni agli altri. Il numero di strati è determinato dabackground-imageo backgroundIl numero di valori separati da virgola nell'attributo abbreviato determina.

.box {
　　　　width: 100%;
　　　　height: 500px;
　　　　background: url("images/birds.png") no-repeat center, url("images/clouds.png") no-repeat center, lightblue;
}

Il primo valore nella lista separata da virgola dell'insieme di sfondi (cioèbackground-image“birds.png”） verrà visualizzato in alto, mentre l'ultimo valore (cioè il colore “lightblue”） verrà visualizzato in basso. Solo l'ultimo sfondo può includerebackground-color.