web-dev-qa-db-fra.com

fond: aucun vs fond: transparent quelle est la différence?

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

background: none;
background: transparent;
  1. Sont-ils tous les deux valables?
  2. Lequel devrait être utilisé et pourquoi?
cssbackground
108
web-tiki

Il n'y a pas de différence entre eux.

Si vous ne spécifiez pas de valeur pour l'une des demi-douzaines de propriétés pour lesquelles background est un raccourci, sa valeur par défaut est définie. none et transparent sont les valeurs par défaut.

On définit explicitement le _background-image_ sur none et implicitement le _background-color_ sur transparent. L'autre est l'inverse.

103
Quentin

Comme information additionnelle sur @ Quentin répond, et comme il le dit à juste titre, la propriété background CSS elle-même est un raccourci pour:

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

C'est moyen, 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;

Alors ... quand vous définissez: background:none;
vous dites que toutes les propriétés de l’arrière-plan sont définies sur aucune ...
Vous dites que background-image: none; et tous les autres sont dans l'état initial (car ils ne sont pas déclarés).
Donc, background:none; 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 en gros:

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

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

Mais! .. si vous dites background:none vs background:red alors oui ... il y a une grande différence, comme je l'ai dit, le premier définirait toutes les propriétés sur none/default et le second, change seulement le color et reste le reste dans son état default.

Donc en bref:

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

Upd1: valeur initiale (alias default)

Valeur initiale la concaténation des valeurs initiales de ses propriétés de type main longue:

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 background descriptions ici

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

61
gmo

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

background: initial;
7
herman