Was ist der Unterschied zwischen Hintergrund und Hintergrundfarbe?

Was ist der Unterschied zwischen der Angabe einer Hintergrundfarbe mit backgroundund background-color?

Snippet # 1

body { background-color: blue; }

Snippet # 2

body { background: blue; }

Vorausgesetzt, dass dies zwei unterschiedliche Eigenschaften sind, gibt es in Ihrem speziellen Beispiel keinen Unterschied im Ergebnis, da es sich backgroundtatsächlich um eine Abkürzung für handelt

Hintergrundfarbe
Hintergrundbild
Hintergrundposition
Hintergrund-Wiederholung
Hintergrund-Anhang
Hintergrund-Clip
Hintergrund-Ursprung
Hintergrundgröße

So gibt es neben der background-color, die mit backgroundVerknüpfung können Sie auch einen oder mehrere Werte hinzufügen , ohne dass andere sich wiederholende background-*Eigenschaft mehr als einmal.

Welche Sie auswählen müssen, liegt im Wesentlichen bei Ihnen. Dies kann jedoch auch von bestimmten Bedingungen Ihrer Stildeklarationen abhängen (z. B. wenn Sie nur die überschreiben müssen, wenn Sie background-colorandere verwandte background-*Eigenschaften von einem übergeordneten Element erben , oder wenn Sie alle Werte entfernen müssen außer dem background-color).

backgroundwird supercede alle bisherigen background-color, background-imageetc. Spezifikationen. Es ist im Grunde eine Abkürzung, aber auch ein Zurücksetzen .

Ich werde es manchmal verwenden, um frühere backgroundSpezifikationen in Vorlagenanpassungen zu überschreiben , wo ich Folgendes möchte:

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

um folgendes zu sein:

background: black;

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

Informationen zur CSS-Leistung :

backgroundvs background-color:

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

Während diese Zahlen von einem einzelnen Seiten-Reload stammen, haben sich bei nachfolgenden Aktualisierungen die Renderzeiten geändert, aber der prozentuale Unterschied war im Grunde jedes Mal der gleiche.

Dies entspricht einer Einsparung von fast 42,6 ms, fast doppelt so schnell , wenn in Safari 7.0.1 Hintergrund anstelle von Hintergrundfarbe verwendet wird. Chrome 33 scheint ungefähr gleich zu sein.

Das hat mich ehrlich gesagt umgehauen, weil es aus zwei Gründen am längsten gedauert hat:

• Normalerweise argumentiere ich immer für explizite Aussagen in CSS-Eigenschaften, insbesondere mit Hintergründen, da dies die Spezifität in der Zukunft nachteilig beeinflussen kann.
• Ich dachte, wenn ein Browser sieht background: #000;, sieht er wirklich background: #000 none no-repeat top center;. Ich habe hier keinen Link zu einer Ressource, aber ich erinnere mich, dass ich das irgendwo gelesen habe.

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

Mit können backgroundSie alle backgroundEigenschaften einstellen wie:

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

Mit können background-colorSie einfach die Farbe des Hintergrunds angeben

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: Hintergrund - Kurzschrift-Eigenschaft)

Einer der Unterschiede:

Wenn Sie auf diese Weise ein Bild 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, entspricht dies der Hintergrundfarbe und kann überschrieben werden.

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

Sie sind beide gleich. Es gibt mehrere Hintergrund - Selektoren (dh background-color, background-image, background-position) und man kann sich entweder Zugriff durch den einfacheren backgroundWähler oder die spezielleren ein. 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 backgroundShorthand-Eigenschaft mehrere hintergrundbezogene Eigenschaften festlegt. Sie werden alle festgelegt, auch wenn Sie nur einen Farbwert angeben, da dann die anderen Eigenschaften auf ihre Anfangswerte gesetzt werden, z. B. background-imageaufnone . .

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 Kurzschrift tendenziell etwas sicherer. Dies ist eine Vorsichtsmaßnahme (nicht vollständig, aber nützlich), um zu verhindern, dass versehentlich unerwartete Hintergrundeigenschaften wie ein Hintergrundbild von einem anderen Stylesheet abgerufen werden. Außerdem ist es kürzer. Sie müssen sich jedoch daran erinnern, dass dies wirklich bedeutet, dass alle Hintergrundeigenschaften festgelegt werden.

Es gibt keinen Unterschied. Beide funktionieren auf die gleiche Weise.

CSS-Hintergrundeigenschaften werden verwendet, um die Hintergrundeffekte eines Elements zu definieren.

CSS-Eigenschaften für Hintergrundeffekte:

• Hintergrundfarbe
• Hintergrundbild
• Hintergrund Wiederholung
• Hintergrund-Anhang
• Hintergrundposition

Die Hintergrundeigenschaft enthält alle diese Eigenschaften, und Sie können sie einfach in eine Zeile schreiben.

Dies ist die beste Antwort. Kurzschrift (Hintergrund) ist für Reset und DRY (mit Langhand kombinieren).

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

Ich habe das CSS-Leistungsexperiment neu erstellt und die Ergebnisse sind heutzutage erheblich unterschiedlich.

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.

backgroundist die Abkürzung für background-colorund einige andere Hintergrundinformationen wie folgt :

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

Lesen Sie die folgende Erklärung von W3C:

Hintergrund - Kurzschrift Eigentum

Um den Code zu verkürzen, können Sie auch alle Hintergrundeigenschaften in einer einzigen Eigenschaft angeben. Dies wird als Kurzform bezeichnet.

Die Abkürzungseigenschaft für Hintergrund ist Hintergrund:

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

Bei Verwendung der Shorthand-Eigenschaft lautet die Reihenfolge der Eigenschaftswerte:

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

Es spielt keine Rolle, ob einer der Eigenschaftswerte fehlt, solange die anderen in dieser Reihenfolge sind.

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

Das funktioniert:

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

Das geht nicht:

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

background ist eine Abkürzung für Folgendes:

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

Detaillierte Informationen zu jeder Immobilie finden Sie hier

Eigenschaften Reihenfolge

Bei den meisten Browserimplementierungen (ich denke, ältere Browser könnten Probleme verursachen) spielt die Reihenfolge der Eigenschaften keine Rolle, außer:

• background-originund background-clip: Wenn diese beiden Eigenschaften vorhanden sind, beziehen sich die erste auf -originund die zweite auf -clip.

  Beispiel:

  background: content-box green padding-box;

  Ist äquivalent zu:

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

• background-sizemuss immer folgen background-positionund die Eigenschaften müssen durch getrennt werden/

• Wenn background-positiones aus zwei Zahlen besteht, ist die erste der horizontale Wert und die zweite der vertikale Wert.

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

/*works*/
background: gray;

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

Sie können einige ziemlich nette Sachen machen, sobald Sie verstanden haben, dass Sie damit mit der Vererbung spielen können. Lassen Sie uns jedoch zuerst etwas aus diesem Dokument im Hintergrund verstehen :

Mit CSS3 können Sie Elemente mit mehreren Hintergründen versehen. Diese sind übereinander geschichtet, wobei der erste Hintergrund oben und der letzte Hintergrund hinten aufgeführt sind. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.

Also, wenn man es tut:

background: red;

Er setzt die Hintergrundfarbe auf Rot, weil Rot der letzte aufgeführte Wert ist.

Wenn man es tut:

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

Rot ist wieder die Hintergrundfarbe, ABER Sie sehen einen Farbverlauf.

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

Nun das gleiche 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 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 (dann erhalten wir den Farbverlauf) oder der Hintergrundfarbe erben, erhalten wir Rot.

Eine Sache, die mir aufgefallen ist und die ich in der Dokumentation nicht sehe, ist die Verwendung background: url("image.png")

kurze Hand wie oben, wenn das Bild nicht gefunden wird, sendet es einen 302-Code, anstatt ignoriert zu werden, wie es ist, wenn Sie verwenden

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

Es gibt einen Fehler in Bezug auf Hintergrund und Hintergrundfarbe

Der Unterschied besteht darin, dass bei Verwendung des Hintergrunds manchmal beim Erstellen einer Webseite im CSS-Hintergrund: #fff // einen Block des Maskenbilds ("oberstes Element, Text oder Bild") überschreiben kann. Daher ist es besser, immer den Hintergrund zu verwenden. Farbe für den sicheren Gebrauch, in Ihrem Design, wenn es individuell ist