Hintergrund: keine vs Hintergrund: transparent Was ist der Unterschied?

119

Gibt es einen Unterschied zwischen diesen beiden CSS-Eigenschaften:

background: none;
background: transparent;
  1. Sind beide gültig?
  2. Welches sollte verwendet werden und warum?
Web-Tiki
quelle

Antworten:

111

Es gibt keinen Unterschied zwischen ihnen.

Wenn Sie für eine der backgroundAbkürzungen für ein halbes Dutzend Eigenschaften keinen Wert angeben , wird dieser auf den Standardwert gesetzt. noneund transparentsind die Standardeinstellungen.

Man setzt explizit das background-imageto noneund setzt implizit das background-colorto transparent. Der andere ist umgekehrt.

QUentin
quelle
2
@herman - Nein, das können sie nicht. Dies ist das gleiche wie background-color: transparent; background-image: none;. Ein Benutzer-Stylesheet überschreibt möglicherweise einen oder beide dieser Werte, tut dies jedoch genau so, als ob background-color: transparent; background-image: none;es explizit geschrieben worden wäre.
Quentin
Sie sagen also, dass der "anfängliche" Eigenschaftswert (der für nicht angegebene Eigenschaften verwendet wird) sogar Stylesheets für Benutzeragenten überschreibt? Haben Sie eine Referenz?
Hermann
Benutzeragenten-Stylesheets implementieren die Spezifikation, die den anfänglichen Eigenschaftswert dieser Eigenschaften als transparentund definiert none.
Quentin
63

Als zusätzliche Informationen zu @Quentin antworten und wie er zu Recht sagt, ist die backgroundCSS-Eigenschaft selbst eine Abkürzung für:

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

Das heißt, Sie können alle Stile in einem gruppieren, wie zum Beispiel:

background: red url(../img.jpg) 0 0 no-repeat fixed;

Dies wäre (in diesem Beispiel):

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

Also ... wenn Sie festlegen: background:none;
Sie sagen, dass alle Hintergrundeigenschaften auf keine festgelegt sind ...
Sie sagen dies background-image: none;und alle anderen auf den initialStatus (da sie nicht deklariert werden).
Also background:none;ist:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Wenn Sie nun nur die Farbe definieren (in Ihrem Fall transparent), sagen Sie im Grunde:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Ich wiederhole, wie @Quentin zu Recht sagt, dass die default transparentund none-Werte in diesem Fall gleich sind. In Ihrem Beispiel und für Ihre ursprüngliche Frage: Nein, es gibt keinen Unterschied zwischen ihnen.

Aber! .. wenn du background:noneVs sagst, background:reddann ja ... es gibt einen großen Unterschied, wie ich sage, der erste würde alle Eigenschaften auf setzen none/defaultund der zweite wird nur das ändern colorund bleibt der Rest in seinem defaultZustand.

Also in Kürze:

Kurze Antwort : Nein, es gibt überhaupt keinen Unterschied (in Ihrem Beispiel und Ihrer ursprünglichen Frage)
Lange Antwort : Ja, es gibt einen großen Unterschied, der jedoch direkt von den Eigenschaften abhängt, die dem Attribut gewährt wurden.


Upd1: Anfangswert (aka default)

Anfangswert Die Verkettung der Anfangswerte seiner Langhand-Eigenschaften:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

Weitere backgroundBeschreibungen finden Sie hier


Upd2: Klären Sie die background:none;Spezifikation besser .

gmo
quelle
Danke für die Antwort, was sind die Standardwerte für Hintergrundbild, Hintergrundwiederholung ...? hängen sie vom Browser ab? Wenn ich Ihre Erklärung verstehe, ist es besser, Hintergrund zu verwenden: Keine, damit keiner der Werte auf Standard gesetzt ist?
Web-Tiki
Hast du versucht, was du postest? Sind alle Werte auf Null gesetzt? Überprüfen Sie die consoleauf dieser Demo jsfiddle.net/dnzy2/6
DaniP
wenn Sie einstellen: Hintergrund: keine; Sie sagen, dass alle Hintergrundeigenschaften auf keine gesetzt sind ... Ist keine Möglichkeit zu sagen, ist falsch
DaniP
2
+1, Dies muss die akzeptierte Antwort sein (wenn sie korrekt ist).
Pacerier
7

Um die anderen Antworten zu ergänzen: Wenn Sie alle Hintergrundeigenschaften auf ihren Anfangswert (einschließlich background-color: transparentund background-image: none) zurücksetzen möchten, ohne explizit einen Wert wie transparentoder anzugeben none, können Sie dies schriftlich tun:

background: initial;
ihr Mann
quelle
5
Seien Sie vorsichtig, IE unterstützt nicht initial. siehe Kann ich verwenden und MDN
chharvey