Was ist der Unterschied zwischen der Angabe einer Hintergrundfarbe mit background
und background-color
?
Snippet # 1
body { background-color: blue; }
Snippet # 2
body { background: blue; }
quelle
Was ist der Unterschied zwischen der Angabe einer Hintergrundfarbe mit background
und 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 background
tatsä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 background
Verknü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-color
andere verwandte background-*
Eigenschaften von einem übergeordneten Element erben , oder wenn Sie alle Werte entfernen müssen außer dem background-color
).
background
also nur eine Verknüpfung für eines der 5 Attribute? Daher im wirklichen Leben nicht praktikabel, wenn Hintergrundposition, Farbe und Bild vorhanden sind?P { background: url("chess.png") gray 50% repeat fixed }
background
wird supercede alle bisherigenbackground-color
,background-image
etc. Spezifikationen. Es ist im Grunde eine Abkürzung, aber auch ein Zurücksetzen .Ich werde es manchmal verwenden, um frühere
background
Spezifikationen 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.quelle
Informationen zur CSS-Leistung :
background
vsbackground-color
:Ref: https://github.com/mdo/css-perf#background-vs-background-color
quelle
These kind of tests are cheats and always going to be somewhat inaccurate from the real world
github.com/mdo/css-perf#updated-conclusions-from-averagesMit können
background
Sie allebackground
Eigenschaften einstellen wie:background-color
background-image
background-repeat
background-position
etc.
Mit können
background-color
Sie einfach die Farbe des Hintergrunds angebenVS.
Mehr Info
(Siehe Bildunterschrift: Hintergrund - Kurzschrift-Eigenschaft)
quelle
Einer der Unterschiede:
Wenn Sie auf diese Weise ein Bild als Hintergrund verwenden:
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/
quelle
Sie sind beide gleich. Es gibt mehrere Hintergrund - Selektoren (dh
background-color
,background-image
,background-position
) und man kann sich entweder Zugriff durch den einfacherenbackground
Wähler oder die spezielleren ein. Zum Beispiel:oder
quelle
Der Unterschied besteht darin, dass die
background
Shorthand-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-image
aufnone
. .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.
quelle
Es gibt keinen Unterschied. Beide funktionieren auf die gleiche Weise.
Die Hintergrundeigenschaft enthält alle diese Eigenschaften, und Sie können sie einfach in eine Zeile schreiben.
quelle
Dies ist die beste Antwort. Kurzschrift (Hintergrund) ist für Reset und DRY (mit Langhand kombinieren).
quelle
Ich habe das CSS-Leistungsexperiment neu erstellt und die Ergebnisse sind heutzutage erheblich unterschiedlich.
Chrome 54 : 443 (µs / Div)
Firefox 49 : 162 (µs / Div)
Kante 10 : 56 (µs / Div)
Chrome 54 : 449 (µs / Div)
Firefox 49 : 171 (µs / Div)
Kante 10 : 58 (µs / Div)
Wie Sie sehen, gibt es fast keinen Unterschied.
quelle
background
ist die Abkürzung fürbackground-color
und einige andere Hintergrundinformationen wie folgt :Lesen Sie die folgende Erklärung von W3C:
Bei Verwendung der Shorthand-Eigenschaft lautet die Reihenfolge der Eigenschaftswerte:
quelle
Ich habe festgestellt, dass Sie keinen Verlauf mit Hintergrundfarbe festlegen können.
Das funktioniert:
Das geht nicht:
quelle
background
ist eine Abkürzung für Folgendes: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-origin
undbackground-clip
: Wenn diese beiden Eigenschaften vorhanden sind, beziehen sich die erste auf-origin
und die zweite auf-clip
.Beispiel:
Ist äquivalent zu:
background-size
muss immer folgenbackground-position
und die Eigenschaften müssen durch getrennt werden/
Wenn
background-position
es aus zwei Zahlen besteht, ist die erste der horizontale Wert und die zweite der vertikale Wert.quelle
Ich habe beim Generieren von E-Mails für Outlook bemerkt ...
quelle
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 :
Also, wenn man es tut:
Er setzt die Hintergrundfarbe auf Rot, weil Rot der letzte aufgeführte Wert ist.
Wenn man es tut:
Rot ist wieder die Hintergrundfarbe, ABER Sie sehen einen Farbverlauf.
Nun das gleiche mit Hintergrundfarbe:
Der Grund dafür ist, dass wir dies tun:
Die letzte Zahl legt die Hintergrundfarbe fest.
Dann, bevor wir vom Hintergrund (dann erhalten wir den Farbverlauf) oder der Hintergrundfarbe erben, erhalten wir Rot.
quelle
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
quelle
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
quelle