background: none vs background: transparent Quelle est la différence?

Y a-t-il une différence entre ces deux propriétés CSS:

background: none;
background: transparent;

1. Sont-ils tous les deux valides?
2. Lequel doit être utilisé et pourquoi?

Il n'y a aucune différence entre eux.

Si vous ne spécifiez pas de valeur pour l'une des demi-douzaines de propriétés qui backgroundest un raccourci pour, elle est définie sur sa valeur par défaut. noneet transparentsont les valeurs par défaut.

On définit explicitement le background-imageto noneet implicitement définit le background-colorto transparent. L'autre est l'inverse.

En tant qu'informations supplémentaires sur la réponse @Quentin , et comme il le dit à juste titre, la backgroundpropriété CSS elle-même est un raccourci pour:

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

Cela signifie que vous pouvez regrouper tous les styles en un seul, comme:

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

Ce serait (dans cet exemple):

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

Donc ... lorsque vous définissez: background:none;
vous dites que toutes les propriétés d'arrière-plan sont définies sur aucune ...
Vous dites cela background-image: none;et toutes les autres à l' initialétat (car elles ne sont pas déclarées).
Alors, background:none;c'est:

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

Maintenant, lorsque vous définissez uniquement la couleur (dans votre cas transparent), vous dites essentiellement:

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

Je le répète, comme @Quentin le dit à juste titre, les valeurs default transparentet dans ce cas sont les mêmes, donc dans votre exemple et pour votre question d'origine, non, il n'y a pas de différence entre elles.none

Mais! .. si vous dites background:noneVs background:redalors oui ... il y a une grande différence, comme je l'ai dit, le premier définirait toutes les propriétés sur none/defaultet le second, ne changera que le coloret restera le reste dans son defaultétat.

Donc en bref:

Réponse courte : Non, il n'y a aucune différence (dans votre exemple et question originale)
Réponse longue : Oui, il y a une grande différence, mais dépend directement des propriétés accordées à l'attribut.

Upd1: valeur initiale (aka default)

Valeur initiale la concaténation des valeurs initiales de ses propriétés longues:

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

Voir plus de backgrounddescriptions ici

Upd2: Clarifiez mieux la background:none;spécification.

Pour compléter les autres réponses: si vous souhaitez réinitialiser toutes les propriétés d'arrière-plan à leur valeur initiale (qui inclut background-color: transparentet background-image: none) sans spécifier explicitement une valeur telle que transparentou none, vous pouvez le faire en écrivant:

background: initial;