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

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?

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.

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 .

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;