Qual'è la differenza tra background e background-color

Qual è la differenza tra specificare un colore di sfondo usando backgrounde background-color?

Snippet n. 1

body { background-color: blue; }

Snippet # 2

body { background: blue; }

Premettendo che si tratta di due proprietà distinte, nel tuo esempio specifico non c'è differenza nel risultato, poiché in backgroundrealtà è una scorciatoia per

sfondo-colore
sfondo-immagine
sfondo-posizione
sfondo-ripetizione
sfondo-allegato
sfondo-clip
sfondo-origine
dimensione-sfondo

Pertanto, oltre a background-color, utilizzando il backgroundcollegamento è possibile anche aggiungere uno o più valori senza ripetere altre background-*proprietà più di una volta.

Quale scegliere dipende essenzialmente da te, ma potrebbe anche dipendere da condizioni specifiche delle dichiarazioni di stile (ad es. Se è necessario sovrascrivere solo background-colorquando si ereditano altre background-*proprietà correlate da un elemento padre o se è necessario rimuovere tutti i valori eccetto il background-color).

backgroundsi sostituiscono tutti i precedenti background-color, background-imageecc specifiche. Fondamentalmente è una scorciatoia, ma anche un reset .

A volte lo userò per sovrascrivere le backgroundspecifiche precedenti nelle personalizzazioni dei modelli, dove vorrei quanto segue:

background: white url(images/image1.jpg) top left repeat;

essere il seguente:

background: black;

Così, tutti i parametri ( background-image, background-position, background-repeat) verranno ripristinate ai valori predefiniti.

Informazioni sulle prestazioni CSS :

backgroundvs background-color:

Confronto di 18 campioni di colore resi 100 volte su una pagina come piccoli rettangoli, una volta con sfondo e una volta con colore di sfondo .

Mentre questi numeri provengono da una singola pagina ricaricata, con successivi aggiornamenti i tempi di rendering sono cambiati, ma la differenza percentuale è stata sostanzialmente la stessa ogni volta.

Questo è un risparmio di quasi 42,6 ms, quasi il doppio della velocità , quando si utilizza lo sfondo anziché il colore di sfondo in Safari 7.0.1. Chrome 33 sembra essere più o meno lo stesso.

Questo onestamente mi ha lasciato senza fiato perché per il tempo più lungo per due motivi:

• Di solito chiedo sempre esplicitamente le proprietà CSS, in particolare con gli sfondi perché può influire negativamente sulla specificità lungo la strada.
• Ho pensato che quando vede un browser background: #000;, lo vedono davvero background: #000 none no-repeat top center;. Non ho un link a una risorsa qui, ma ricordo di averlo letto da qualche parte.

Rif: https://github.com/mdo/css-perf#background-vs-background-color

Con backgroundte puoi impostare tutte le backgroundproprietà come:

• background-color
• background-image
  
• background-repeat
  
• background-position
  eccetera.

Con background-colorte puoi semplicemente specificare il colore dello sfondo

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Ulteriori informazioni

(Vedi Didascalia: Sfondo - Proprietà stenografia)

Una delle differenze:

Se usi un'immagine come sfondo in questo modo:

background: url('Image Path') no-repeat;

quindi non è possibile sovrascriverlo con la proprietà "background-color".

Ma se si utilizza lo sfondo per applicare un colore, è uguale al colore di sfondo e può essere sostituito.

ad es .: http://jsfiddle.net/Z57Za/11/ e http://jsfiddle.net/Z57Za/12/

Sono entrambi uguali. Ci sono molteplici sfondo selettori (vale a dire background-color, background-image, background-position) ed è possibile accedere sia attraverso il più semplice backgroundselettore o quello più specifico. Per esempio:

background: blue url(/myImage.jpg) no-repeat;

o

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

La differenza è che la backgroundproprietà stenografia imposta diverse proprietà relative allo sfondo. Li imposta tutti, anche se si specifica ad esempio solo un valore di colore, da allora le altre proprietà sono impostate sui loro valori iniziali, ad esempio background-imagea none.

Ciò non significa che avrebbe sempre la precedenza su qualsiasi altra impostazione per quelle proprietà. Questo dipende dalla cascata secondo le solite regole generalmente incomprese.

In pratica, la stenografia tende ad essere un po 'più sicura. È una precauzione (non completa, ma utile) contro l'ottenimento accidentale di alcune proprietà di sfondo impreviste, come un'immagine di sfondo, da un altro foglio di stile. Inoltre, è più corto. Ma devi ricordare che significa davvero "impostare tutte le proprietà di sfondo".

Non c'è differenza. Entrambi funzioneranno allo stesso modo.

Le proprietà di sfondo CSS vengono utilizzate per definire gli effetti di sfondo di un elemento.

Proprietà CSS utilizzate per gli effetti di sfondo:

• colore di sfondo
• immagine di sfondo
• background-repeat
• background-attachment
• background-position

La proprietà Background include tutte queste proprietà e puoi semplicemente scriverle in una riga.

Questa è la risposta migliore La scorciatoia (in background) è per reset e DRY (combinare con longhand).

Confronto di 18 campioni di colore resi 100 volte su una pagina come piccoli rettangoli, una volta con sfondo e una volta con colore di sfondo.

Ho ricreato l' esperimento sulle prestazioni CSS e i risultati sono significativamente diversi al giorno d'oggi.

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (µs / div)

Bordo 10 : 56 (µs / div)

background-color

Chrome 54 : 449 (µs / div)

Firefox 49 : 171 (µs / div)

Bordo 10 : 58 (µs / div)

Come vedi, non c'è quasi nessuna differenza.

backgroundè la scorciatoia per background-colore poche altre cose relative allo sfondo come di seguito:

background-color
background-image
background-repeat
background-attachment
background-position 

Leggi la seguente dichiarazione dal W3C:

Sfondo - Proprietà stenografia

Per abbreviare il codice, è anche possibile specificare tutte le proprietà di sfondo in una singola proprietà. Questa è chiamata proprietà abbreviata.

La proprietà stenografia per lo sfondo è lo sfondo:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Quando si utilizza la proprietà abbreviata, l'ordine dei valori delle proprietà è:

background-color
background-image
background-repeat
background-attachment
background-position

Non importa se manca uno dei valori delle proprietà, purché gli altri siano in questo ordine.

Ho scoperto che non è possibile impostare una sfumatura con il colore di sfondo.

Questo funziona:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Questo non:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background è una proprietà abbreviata per quanto segue:

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

Puoi informazioni dettagliate su ogni proprietà qui

Ordine delle proprietà

Nella maggior parte dell'implementazione del browser (penso che forse i browser più vecchi potrebbero presentare problemi) l'ordine delle proprietà non ha importanza, tranne per:

• background-origine background-clip: quando entrambe queste proprietà sono presenti, la prima si riferisce a -origine la seconda a -clip.

  Esempio:

  background: content-box green padding-box;

  È equivalente a:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizedeve sempre seguire background-positione le proprietà devono essere separate da/

• se background-positionè composto da due numeri, il primo è il valore orizzontale e il secondo il valore verticale.

Ho notato quando si generano e-mail per Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Puoi fare cose piuttosto ordinate una volta capito che puoi giocare con l'eredità con questo. Comunque prima capiamo qualcosa da questo documento sullo sfondo:

Con CSS3, puoi applicare più sfondi agli elementi. Questi sono sovrapposti l'uno sopra l'altro con il primo sfondo fornito in alto e l'ultimo sfondo elencato nella parte posteriore. Solo l'ultimo sfondo può includere un colore di sfondo.

Quindi quando uno fa:

background: red;

Sta impostando il colore di sfondo su rosso perché il rosso è l'ultimo valore elencato.

Quando uno fa:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Il rosso è il colore di sfondo ancora una volta MA vedrai una sfumatura.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

Ora la stessa cosa con il colore di sfondo:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

Il motivo per cui ciò accade è perché quando lo facciamo:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

L'ultimo numero imposta il colore di sfondo.

Quindi nel prima stiamo ereditando dallo sfondo (quindi otteniamo il gradiente) o dal colore di sfondo, quindi otteniamo il rosso.

Una cosa che ho notato che non vedo nella documentazione sta usando background: url("image.png")

mano corta come sopra se l'immagine non viene trovata, invia un codice 302 invece di essere ignorata come è se si utilizza

background-image: url("image.png") 

C'è un bug relativo allo sfondo e al colore di sfondo

la differenza di questo, quando si utilizza lo sfondo, a volte quando si crea una pagina Web in background CSS: #fff // può scavalcare un blocco di immagine Maschera ("elemento principale, testo o immagine")), quindi è meglio usare sempre lo sfondo- colore per un uso sicuro, nel tuo design se è individuale