CSS
sfondi

introduzione

Sintassi

• colore di sfondo: colore | trasparente | iniziale | ereditare;
• background-image: url | nessuno | iniziale | ereditare;
• background-position: value;
• dimensione dello sfondo: <bg-size> [<bg-size>]
• <bg-size>: auto | lunghezza | copertina | contenere | iniziale | ereditare;
• background-repeat: repeat | repeat-x | repeat-y | nessuna ripetizione | iniziale | ereditare;
• background-origin: padding-box | scatola di confine | casella di contenuto | iniziale | ereditare;
• sfondo-clip: border-box | imbottitura-scatola | casella di contenuto | iniziale | ereditare;
• background-attachment: scroll | fisso | locale | iniziale | ereditare;
• sfondo: bg-color bg-image posizione / bg-size bg-repeat bg-origine bg-clip bg-attachment iniziale | ereditare;

Osservazioni

Colore di sfondo

La proprietà background-color imposta il colore di sfondo di un elemento usando un valore di colore o tramite parole chiave, come transparent , inherit o initial .

• trasparente , specifica che il colore di sfondo deve essere trasparente. Questo è il valore predefinito.

• eredita , eredita questa proprietà dal suo elemento genitore.

• iniziale , imposta questa proprietà sul valore predefinito.

Questo può essere applicato a tutti gli elementi e agli pseudo-elementi ::first-letter / ::first-line .

I colori in CSS possono essere specificati con metodi diversi .

Nomi di colori

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• L'esempio sopra riportato è uno dei molti modi in cui il CSS deve rappresentare un singolo colore.

Codici colore esadecimali

Il codice esadecimale viene utilizzato per indicare le componenti RGB di un colore in notazione esadecimale in base 16. # ff0000, ad esempio, è rosso acceso, dove il componente rosso del colore è 256 bit (ff) e le corrispondenti parti verde e blu del colore sono 0 (00).

Se entrambi i valori in ciascuno dei tre accoppiamenti RGB (R, G e B) sono gli stessi, il codice colore può essere abbreviato in tre caratteri (la prima cifra di ciascun accoppiamento). #ff0000 può essere abbreviato in #f00 e #ffffff può essere abbreviato in #fff .

La notazione esadecimale non fa distinzione tra maiuscole e minuscole.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Un altro modo per dichiarare un colore è usare RGB o RGBa.

RGB sta per Rosso, Verde e Blu e richiede tre valori separati tra 0 e 255, tra parentesi, che corrispondono ai valori dei colori decimali rispettivamente per rosso, verde e blu.

RGBa consente di aggiungere un ulteriore parametro alfa tra 0.0 e 1.0 per definire l'opacità.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Un altro modo per dichiarare un colore è usare HSL o HSLa ed è simile a RGB e RGBa.

HSL è sinonimo di tonalità, saturazione e luminosità, ed è spesso chiamato anche HLS:

• La tonalità è un grado sulla ruota dei colori (da 0 a 360).
• La saturazione è una percentuale compresa tra 0% e 100%.
• La luminosità è anche una percentuale compresa tra 0% e 100%.

HSLa consente di aggiungere un ulteriore parametro alfa tra 0.0 e 1.0 per definire l'opacità.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interazione con l'immagine di sfondo

Le seguenti affermazioni sono tutte equivalenti:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Porteranno tutti al colore rosso che viene mostrato sotto l'immagine, dove le parti dell'immagine sono trasparenti, o l'immagine non viene visualizzata (forse come risultato della background-repeat dello background-repeat ).

Si noti che quanto segue non è equivalente:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Qui, il valore dello background sovrascrive l' background-image .

Per maggiori informazioni sulla proprietà dello background , vedere Stenografia background sfondo

Immagine di sfondo

La proprietà background-image viene utilizzata per specificare un'immagine di sfondo da applicare a tutti gli elementi corrispondenti. Per impostazione predefinita, questa immagine viene affiancata per coprire l'intero elemento, escluso il margine.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Per utilizzare più immagini come background-image , definire l' url() separato da virgola url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Le immagini si impilano secondo il loro ordine con la prima immagine dichiarata in cima alle altre e così via.

Più CSS per l'immagine di sfondo

Questi attributi seguenti sono molto utili e quasi essenziali.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Gradienti di sfondo

I gradienti sono nuovi tipi di immagine, aggiunti in CSS3. Come immagine, le sfumature sono impostate con la proprietà background-image , o con la stenografia dello background .

Esistono due tipi di funzioni sfumate, lineari e radiali. Ogni tipo ha una variante non ripetitiva e una variante ripetitiva:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

lineare-gradiente ()

Un linear-gradient ha la seguente sintassi

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Ad esempio, questo crea un gradiente lineare che parte da destra e passa da rosso a blu

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Puoi creare un gradiente diagonal dichiarando una posizione di partenza sia orizzontale che verticale.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

È possibile specificare qualsiasi numero di interruzioni di colore in una sfumatura separandole con virgole. I seguenti esempi creeranno una sfumatura con 8 stop di colore

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

radiale gradiente ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Ripetendo le sfumature

La ripetizione delle funzioni del gradiente assume gli stessi argomenti degli esempi precedenti, ma affianca il gradiente sullo sfondo dell'elemento.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Si noti che possono essere usati i codici colore HEX, RGB, RGBa, HSL e HSLa al posto dei nomi dei colori. I nomi dei colori sono stati utilizzati per motivi illustrativi. Si noti inoltre che la sintassi del gradiente radiale è molto più complessa del gradiente lineare e qui viene mostrata una versione semplificata. Per una spiegazione completa e specifiche, vedere i documenti MDN

Stenografia di base

La proprietà background può essere utilizzata per impostare una o più proprietà correlate allo sfondo:

L'ordine dei valori non ha importanza e ogni valore è facoltativo

Sintassi

La sintassi della dichiarazione abbreviata di sfondo è:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Esempi

background: red;

Semplicemente impostando un background-color con il valore red .

background: border-box red;

Impostazione di un background-clip di background-color un riquadro di background-color e un background-color di background-color rosso.

background: no-repeat center url("somepng.jpg");

Imposta una background-repeat non ripetizione, background-origin al centro e un'immagine background-image un'immagine.

background: url('pattern.png') green;

In questo esempio, il background-color di background-color dell'elemento sarebbe impostato su green con pattern.png , se disponibile, sovrapposto al colore, ripetendo tutte le volte necessarie per riempire l'elemento. Se pattern.png include qualsiasi trasparenza, il colore green sarà visibile dietro di esso.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

In questo esempio abbiamo uno sfondo nero con un'immagine 'picture.png' in alto, l'immagine non si ripete in nessuno dei due assi ed è posizionata nell'angolo in alto a sinistra. Il / dopo la posizione deve essere in grado di includere la dimensione dell'immagine di sfondo che in questo caso è impostata come larghezza 600px e auto per l'altezza. Questo esempio potrebbe funzionare bene con un'immagine caratteristica che può sfumare in un colore a tinta unita.

NOTA: l' uso della proprietà dello sfondo abbreviato reimposta tutti i valori delle proprietà dello sfondo precedentemente impostati, anche se non viene fornito un valore. Se si desidera solo modificare un valore della proprietà dello sfondo precedentemente impostato, utilizzare invece una proprietà longhand.

Posizione di sfondo

La proprietà background-position viene utilizzata per specificare la posizione di partenza per un'immagine di sfondo o un gradiente

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

La posizione viene impostata utilizzando una coordinata X e Y e viene impostata utilizzando una qualsiasi delle unità utilizzate all'interno dei CSS.

Le unità in CSS possono essere specificate con metodi diversi (vedi qui ).

Proprietà posizione sfondo a mano lunga

Oltre alla proprietà abbreviata di cui sopra, è possibile utilizzare anche le proprietà di background-position-x longhand background-position-x e background-position-y . Questi ti permettono di controllare le posizioni x o y separatamente.

NOTA: questo è supportato in tutti i browser eccetto Firefox (versioni 31-48) 2 . Firefox 49, per essere rilasciato settembre 2016, sosterrà queste proprietà. Fino ad allora, c'è una modifica di Firefox all'interno di questa risposta Stack Overflow.

Allegato sfondo

La proprietà background-attachment imposta se un'immagine di sfondo è fissa o scorre con il resto della pagina.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

Esempi

background-attachment: scroll

Il comportamento predefinito, quando il corpo scorre, lo sfondo scorre con esso:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

background-attachment: fixed

L'immagine di sfondo verrà fissata e non si sposterà quando il corpo viene scostato:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

background-attachment: local

L'immagine di sfondo del div scorre quando il contenuto del div viene fatto scorrere.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

Ripeti lo sfondo

La proprietà background-repeat imposta se / come verrà ripetuta un'immagine di sfondo.

Per impostazione predefinita, un'immagine di sfondo viene ripetuta sia verticalmente che orizzontalmente.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Ecco come una background-repeat: repeat-y assomiglia a:

Colore di sfondo con opacità

Se imposti opacity su un elemento, questo avrà effetto su tutti i suoi elementi figli. Per impostare un'opacità solo sullo sfondo di un elemento, dovrai utilizzare i colori RGBA. L'esempio seguente avrà uno sfondo nero con 0.6 opacità.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Immagine di sfondo multipla

Nei CSS3, possiamo impilare più sfondi nello stesso elemento.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Le immagini saranno impilate una sopra l'altra con il primo sfondo in alto e l'ultimo sfondo nella parte posteriore. img_1 sarà in cima, img_2 e img_3 sono in fondo.

Possiamo anche usare la proprietà abbreviata di sfondo per questo:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

Possiamo anche impilare immagini e gradienti:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• dimostrazione

La proprietà background-origin

La proprietà background-origin specifica dove è posizionata l'immagine di sfondo.

Nota: se la proprietà background-attachment è impostata su fixed , questa proprietà non ha alcun effetto.

Valore predefinito: padding-box

Valori possibili:

• padding-box - La posizione è relativa alla casella padding
• border-box - La posizione è relativa alla casella di confine
• content-box : la posizione è relativa alla casella del contenuto
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Risultato:

Di Più:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Clip di sfondo

Definizione e utilizzo: la proprietà background-clip specifica l'area di pittura dello sfondo.

Valore predefinito: border-box

Valori

• border-box è il valore predefinito. Ciò consente allo sfondo di estendersi fino al bordo esterno del bordo dell'elemento.
• padding-box ritaglia lo sfondo sul bordo esterno del padding dell'elemento e non lo lascia estendere nel bordo;
• content-box ritaglia lo sfondo sul bordo della casella del contenuto.
• inherit applica l'impostazione del genitore all'elemento selezionato.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Dimensione dello sfondo

Panoramica generale

La proprietà background-size consente di controllare il ridimensionamento background-image . Richiede fino a due valori, che determinano la scala / dimensione dell'immagine risultante in direzione verticale e orizzontale. Se la proprietà è mancante, è considerata auto sia in width che in height .

auto manterrà le proporzioni dell'immagine, se può essere determinata. L'altezza è facoltativa e può essere considerata auto . Pertanto, su un'immagine di 256 px × 256 px, tutte le seguenti impostazioni della background-size dello background-size produrranno un'immagine con altezza e larghezza di 50 px:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Quindi, se iniziamo con la seguente immagine (che ha le dimensioni menzionate di 256 px × 256 px),

finiremo con un 50 px × 50 px sullo schermo dell'utente, contenuto nello sfondo del nostro elemento:

Si può anche usare valori percentuali per ridimensionare l'immagine rispetto all'elemento. L'esempio seguente produrrebbe un'immagine disegnata di 200 px × 133 px:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

Il comportamento dipende background-origin dello background-origin .

Mantenere le proporzioni

L'ultimo esempio nella sezione precedente ha perso le proporzioni originali. Il cerchio è entrato in un'ellisse, il quadrato in un rettangolo, il triangolo in un altro triangolo.

L'approccio di lunghezza o percentuale non è abbastanza flessibile da mantenere il rapporto aspetto in ogni momento. auto non aiuta, dal momento che potresti non sapere quale dimensione del tuo elemento sarà più grande. Tuttavia, per coprire completamente determinate aree con un'immagine (e il rapporto di aspetto corretto) o per contenere un'immagine con proporzioni corrette completamente in un'area di sfondo, i valori, contain e cover forniscono la funzionalità aggiuntiva.

Eggsplanation per contain e cover

Scusa per il cattivo gioco di parole , ma useremo una foto del giorno di Biswarup Ganguly per la dimostrazione. Diciamo che questo è il tuo schermo, e l'area grigia è al di fuori del tuo schermo visibile. Per la dimostrazione, assumeremo un rapporto 16 × 9.

Vogliamo usare come sfondo la foto sopra riportata del giorno. Tuttavia, abbiamo ritagliato l'immagine su 4x3 per qualche motivo. Potremmo impostare la proprietà della background-size dello background-size una lunghezza fissa, ma ci concentreremo sul contain e sulla cover . Nota anche che presumo che non abbiamo manipolato la larghezza e / o l'altezza del body .

contain

contain

Ridimensiona l'immagine, pur mantenendo il suo rapporto di aspetto intrinseco (se presente), alla dimensione più grande in modo tale che sia la sua larghezza che la sua altezza possano adattarsi all'interno dell'area di posizionamento dello sfondo.

Ciò garantisce che l'immagine di sfondo sia sempre completamente contenuta nell'area di posizionamento dello sfondo, tuttavia in questo caso potrebbe esserci dello spazio vuoto riempito con il background-color :

cover

cover

Ridimensiona l'immagine, pur mantenendo il suo rapporto di aspetto intrinseco (se presente), alla dimensione più piccola in modo tale che sia la sua larghezza che la sua altezza possano coprire completamente l'area di posizionamento dello sfondo.

Questo assicura che l'immagine di sfondo copra tutto. Non ci sarà alcun background-color visibile, tuttavia, a seconda del rapporto dello schermo, una grande parte dell'immagine potrebbe essere tagliata:

Dimostrazione con codice reale

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Proprietà background-blend-mode

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

Vedi il risultato qui: https://jsfiddle.net/MadalinaTn/y69d28Lb/

Sintassi CSS: background-blend-mode: normal | moltiplicare | schermo | sovrapposizione | oscurare | alleggerire | colore-schivata | saturazione | colore | luminosità;