[css] Quelle est la différence entre l'arrière-plan et la couleur de fond


6 Answers

background - background remplacera toutes les spécifications de background-color background-image , d' background-image , etc. C'est essentiellement un raccourci, mais une réinitialisation aussi bien.

Je vais parfois l'utiliser pour écraser les spécifications d' background précédentes dans les personnalisations de modèles, où je voudrais ce qui suit:

background: white url(images/image1.jpg) top left repeat;

être le suivant:

background: black;

Ainsi, tous les paramètres ( background-image , background-position background-repeat , background-repeat ) seront réinitialisés à leurs valeurs par défaut.

Question

Quelle est la différence entre spécifier une couleur d' background-color utilisant l' background - background-color ?

Extrait # 1

body { background-color: blue; }

Extrait # 2

body { background: blue; }



La différence est que la propriété de raccourci d'arrière-plan définit plusieurs propriétés liées à l'arrière-plan. Il les définit tous, même si vous spécifiez uniquement une valeur de couleur, par exemple, les autres propriétés sont définies sur leurs valeurs initiales, par exemple, background-image à none .

Cela ne signifie pas qu'il écrase toujours les autres paramètres de ces propriétés. Cela dépend de la cascade selon les règles habituelles, généralement mal comprises.

En pratique, la sténographie tend à être quelque peu plus sûre. Il s'agit d'une précaution (non complète, mais utile) contre l'obtention accidentelle de certaines propriétés d'arrière-plan inattendues, telles qu'une image d'arrière-plan, à partir d'une autre feuille de style. D'ailleurs, c'est plus court. Mais vous devez vous rappeler que cela signifie vraiment "définir toutes les propriétés d'arrière-plan".




C'est la meilleure réponse. La sténographie (arrière-plan) est pour réinitialiser et DRY (combiner avec la main longue).




Avec l' background vous pouvez définir toutes background propriétés d' background comme:

  • background-color
  • background-image
  • background-repeat
  • background-position
    etc.

Avec la background-color vous pouvez simplement spécifier la couleur de l'arrière-plan

background: url(example.jpg) no-repeat center center #fff;

CONTRE.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Plus d'informations

(Voir Légende: Arrière-plan - Propriété raccourcie)




J'ai remarqué lors de la génération de courriels pour Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;



Il n'y a pas de différence. Les deux fonctionneront de la même manière.

Les propriétés d'arrière-plan CSS sont utilisées pour définir les effets d'arrière-plan d'un élément.

Propriétés CSS utilisées pour les effets d'arrière-plan:

  • Couleur de fond
  • image de fond
  • Répétition du fond
  • fond-attachement
  • position de fond

La propriété Background inclut toutes ces propriétés et vous pouvez simplement les écrire sur une ligne.




Il y a un bug concernant l'arrière-plan et la couleur de fond

Lorsque vous créez une page Web en arrière-plan CSS: #fff // peut parcourir un bloc d'image masque ("élément supérieur, texte ou image"), il est donc préférable de toujours utiliser le fond d'écran. couleur pour une utilisation sûre, dans votre conception si son individu




Related