Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

CSS più sfondi


In questo capitolo imparerai come aggiungere più immagini di sfondo a un elemento.

Imparerai anche le seguenti proprietà:

  • background-size
  • background-origin
  • background-clip

CSS più sfondi

CSS ti consente di aggiungere più immagini di sfondo per un elemento, tramite la background-imageproprietà.

Le diverse immagini di sfondo sono separate da virgole e le immagini sono impilate l'una sull'altra, dove la prima immagine è più vicina allo spettatore.

L'esempio seguente ha due immagini di sfondo, la prima immagine è un fiore (allineato in basso e a destra) e la seconda immagine è uno sfondo di carta (allineato all'angolo in alto a sinistra):

Esempio

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

È possibile specificare più immagini di sfondo utilizzando le singole proprietà di sfondo (come sopra) o la backgroundproprietà abbreviata.

L'esempio seguente utilizza la backgroundproprietà shorthand (stesso risultato dell'esempio precedente):

Esempio

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}


Dimensione sfondo CSS

La proprietà CSS background-sizeconsente di specificare la dimensione delle immagini di sfondo.

La dimensione può essere specificata in lunghezze, percentuali o utilizzando una delle due parole chiave: contenere o coprire.

L'esempio seguente ridimensiona un'immagine di sfondo molto più piccola dell'immagine originale (usando i pixel):

Ringrazialo per il dolore

Il dolore stesso è l'amore

Ecco perché è il minimo a venire, che la nostra pratica normale sopporta per trarne vantaggio

Ecco il codice:

Esempio

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Gli altri due possibili valori per background-sizesono contain e cover.

La containparola chiave ridimensiona l'immagine di sfondo in modo che sia il più grande possibile (ma sia la sua larghezza che la sua altezza devono rientrare nell'area del contenuto). Pertanto, a seconda delle proporzioni dell'immagine di sfondo e dell'area di posizionamento dello sfondo, potrebbero esserci alcune aree dello sfondo che non sono coperte dall'immagine di sfondo.

La coverparola chiave ridimensiona l'immagine di sfondo in modo che l'area del contenuto sia completamente coperta dall'immagine di sfondo (sia la sua larghezza che l'altezza sono uguali o superiori all'area del contenuto). Pertanto, alcune parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo.

L'esempio seguente illustra l'uso di containe cover:

Esempio

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Definisci le dimensioni di più immagini di sfondo

La background-sizeproprietà accetta anche più valori per la dimensione dello sfondo (usando un elenco separato da virgole), quando si lavora con più sfondi.

Nell'esempio seguente sono specificate tre immagini di sfondo, con un valore di dimensione dello sfondo diverso per ciascuna immagine:

Esempio

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Immagine di sfondo a grandezza naturale

Ora vogliamo avere un'immagine di sfondo su un sito Web che copra l'intera finestra del browser in ogni momento.

I requisiti sono i seguenti:

  • Riempi l'intera pagina con l'immagine (senza spazi bianchi)
  • Ridimensiona l'immagine secondo necessità
  • Centra l'immagine nella pagina
  • Non causare barre di scorrimento

L'esempio seguente mostra come farlo; Utilizzare l'elemento <html> (l'elemento <html> è sempre almeno l'altezza della finestra del browser). Quindi imposta uno sfondo fisso e centrato su di esso. Quindi regola le sue dimensioni con la proprietà background-size:

Esempio

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

Immagine dell'eroe

Puoi anche utilizzare diverse proprietà di sfondo su un <div> per creare un'immagine eroe (un'immagine grande con testo) e posizionarla dove vuoi.

Esempio

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

Proprietà CSS di origine in background

La proprietà CSS background-originspecifica dove è posizionata l'immagine di sfondo.

La proprietà assume tre diversi valori:

  • border-box - l'immagine di sfondo inizia dall'angolo in alto a sinistra del bordo
  • padding-box - (impostazione predefinita) l'immagine di sfondo inizia dall'angolo superiore sinistro del bordo del padding
  • casella del contenuto - l'immagine di sfondo inizia dall'angolo in alto a sinistra del contenuto

L'esempio seguente illustra la background-originproprietà:

Esempio

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Proprietà CSS clip di sfondo

La proprietà CSS background-clipspecifica l'area di disegno dello sfondo.

La proprietà assume tre diversi valori:

  • border-box - (impostazione predefinita) lo sfondo viene dipinto sul bordo esterno del bordo
  • padding-box - lo sfondo è dipinto sul bordo esterno dell'imbottitura
  • casella del contenuto - lo sfondo è dipinto all'interno della casella del contenuto

L'esempio seguente illustra la background-clipproprietà:

Esempio

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Mettiti alla prova con gli esercizi

Esercizio:

Aggiungi due immagini di sfondo all'elemento <body>.

img1.gife img2.gif.

Assicurati che img2.gifsia visualizzato sopra img1.gif.

<style>
body {
  background-image: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


Proprietà di sfondo avanzate CSS

Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)