Was ist der Unterschied zwischen Hintergrund und Hintergrundfarbe?

background ersetzt alle vorherigen background-color, background-image usw. Spezifikationen. Es ist im Grunde genommen eine Abkürzung, aber auch ein Zurücksetzen.

Ich werde es manchmal verwenden, um vorherige background Spezifikationen in Vorlagenanpassungen zu überschreiben, wo ich Folgendes möchte:

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

folgendes sein:

background: black;

Daher werden alle Parameter (background-image, background-position, background-repeat) auf ihre Standardwerte zurückgesetzt.

Über CSS-Leistung:

background vs. background-color:

Vergleich von 18 Farbfeldern, die 100 Mal auf einer Seite als klein dargestellt wurden Rechtecke, einmal mit background und einmal mit background-color.

Diese Nummern stammen zwar von einer einzelnen Seite, mit nachfolgendem aktualisiert die Renderzeiten, aber die prozentuale Differenz betrug im Grunde jedes Mal das gleiche.

Das bedeutet eine Einsparung von fast 42,6 ms, fast doppelt so schnell, wenn .__ verwendet wird. Hintergrund statt Hintergrundfarbe in Safari 7.0.1. Chrome 33 scheint ungefähr gleich zu sein.

Dies hat mich ehrlich gesagt aus zwei Gründen umgehauen, weil es die längste Zeit war:

• Normalerweise streite ich immer nach expliziten Eigenschaften in CSS-Eigenschaften, insbesondere mit Hintergründen, da dies die Spezifität der Umgebung beeinträchtigen kann.
• Ich dachte, wenn ein Browser background: #000; sieht, sehen sie wirklich background: #000 none no-repeat top center;. Ich habe hier keinen Link zu einer Ressource, aber ich erinnere mich, dass ich dies irgendwo gelesen habe.

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

Mit background können Sie alle background-Eigenschaften wie folgt festlegen:

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

Mit background-color können Sie einfach die Hintergrundfarbe festlegen

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;

Mehr Info

(Siehe Bildunterschrift: Background - Shorthand-Eigenschaft)

Einer der Unterschiede:

Wenn Sie ein Bild auf diese Weise als Hintergrund verwenden:

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

dann können Sie es nicht mit der Eigenschaft "Hintergrundfarbe" überschreiben.

Wenn Sie jedoch Hintergrund verwenden, um eine Farbe anzuwenden, ist diese mit der Hintergrundfarbe identisch und kann überschrieben werden.

zB: http://jsfiddle.net/Z57Za/11/ und http://jsfiddle.net/Z57Za/12/

Es gibt keinen Unterschied. Beide funktionieren auf dieselbe Weise.

CSS-Hintergrundeigenschaften werden verwendet, um die Hintergrundeffekte von .__ zu definieren. ein Element.

CSS-Eigenschaften für Hintergrundeffekte:

• hintergrundfarbe 
• hintergrundbild 
• hintergrund Wiederholung 
• hintergrundanhang 
• hintergrundposition

Die Hintergrundeigenschaft schließt alle diese Eigenschaften ein und Sie können sie einfach in eine Zeile schreiben.

Sie sind beide gleich. Es gibt mehrere Hintergrundselektoren (d. H. background-color, background-image, background-position), auf die Sie entweder über den einfacheren background-Selektor oder den spezifischeren zugreifen können. Zum Beispiel:

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

oder

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

Der Unterschied besteht darin, dass die Kurzschreibeigenschaft background mehrere hintergrundbezogene Eigenschaften festlegt. Sie setzt alle, auch wenn Sie nur z. B. einen Farbwert, da dann die anderen Eigenschaften auf ihre Anfangswerte gesetzt werden, z. background-image in none.

Dies bedeutet nicht, dass andere Einstellungen für diese Eigenschaften immer überschrieben werden. Dies hängt von der Kaskade nach den üblichen, allgemein missverstandenen Regeln ab.

In der Praxis ist die Abkürzung tendenziell etwas sicherer. Dies ist eine Vorsichtsmaßnahme (nicht vollständig, aber nützlich), wenn Sie versehentlich unerwartete Hintergrundeigenschaften (z. B. ein Hintergrundbild) aus einem anderen Stylesheet erhalten. Außerdem ist es kürzer. Sie müssen sich jedoch daran erinnern, dass es wirklich "alle Hintergrundeigenschaften setzen" bedeutet.

background ist die Abkürzung für background-color und einige andere Hintergrundinformationen wie folgt:

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

Lesen Sie die folgende Erklärung von W3C:

Hintergrund - Eigenschaft der Kurzschrift

Um den Code zu verkürzen, ist es Sie können auch alle Hintergrundeigenschaften in einem einzigen .__ angeben. Eigentum. Dies wird als Abkürzungseigenschaft bezeichnet.

Die Abkürzungseigenschaft für Hintergrund ist Hintergrund:

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

Bei Verwendung der Abkürzungseigenschaft lautet die Reihenfolge der Eigenschaftswerte:

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

Es ist egal, ob einer der Eigenschaftswerte fehlt, solange wie die anderen sind in dieser Reihenfolge.

Vergleich von 18 Farbfeldern, die 100 Mal auf einer Seite als klein dargestellt wurden Rechtecke, einmal mit Hintergrund und einmal mit Hintergrundfarbe.

Ich habe das CSS Performance Experiment neu erstellt und die Ergebnisse unterscheiden sich heutzutage erheblich.

background

Chrome 54 : 443 (µs/div)

Firefox 49 : 162 (µs/div)

Kante 10 : 56 (µs/div)

background-color

Chrome 54 : 449 (µs/div)

Firefox 49 : 171 (µs/div)

Kante 10 : 58 (µs/div)

Wie Sie sehen, gibt es fast keinen Unterschied.

Das ist die beste Antwort. Abkürzung (Hintergrund) steht für Reset und DRY (mit Langschrift kombinieren).

Ich habe festgestellt, dass Sie keinen Farbverlauf mit Hintergrundfarbe festlegen können.

Das funktioniert:

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

Das tut nicht:

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

Ich habe beim Generieren von E-Mails für Outlook festgestellt ...

/*works*/
background: gray;

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

Sie können ein paar hübsche Sachen machen, wenn Sie verstanden haben, dass Sie damit Vererbung spielen können. Zuerst jedoch etwas aus diesem doc im Hintergrund verstehen:

Mit CSS3 können Sie mehrere Hintergründe auf Elemente anwenden. Diese sind übereinander geschichtet mit dem ersten Hintergrund, den Sie oben angeben und der letzte Hintergrund auf der Rückseite. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.

Wenn man also:

background: red;

Er setzt die Hintergrundfarbe auf Rot, da Rot der letzte Wert ist.

Wenn man:

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

Rot ist wieder die Hintergrundfarbe , ABER BEI wird ein Farbverlauf angezeigt.

    .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>

Jetzt dasselbe mit Hintergrundfarbe:

    .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>

Der Grund dafür ist, dass wenn wir dies tun:

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

Die letzte Zahl legt die Hintergrundfarbe fest.

Dann, bevor wir vom Hintergrund erben (dann bekommen wir den Farbverlauf) oder die Hintergrundfarbe, dann bekommen wir Rot.