Quelle est la différence entre l’arrière-plan et la couleur d’arrière-plan

Question

Quelle est la différence entre spécifiant une couleur d’arrière-plan à l’aide et ?

Extrait #1

Extrait #2

Answer 1

Il n’y a aucune différence pratique depuis `` est un raccourci pour

1. couleur d’arrière-plan
2. background-image
3. background-position
4. background-repeat
5. background-attachment

à l’aide de toute façon le raccourci, vous pouvez ajouter plus tard propriétés *2-5* sans répéter , `` ... et ainsi de suite.

Answer 2

background sera remplacent toutes les précédentes, background-color, background-image, etc. les spécifications. En gros, c'est un raccourci, mais un reset .

J'ai parfois l'utiliser pour écraser la précédente background spécifications du modèle de personnalisations, où je voudrais que la suivante:

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

être la suivante:

background: black;

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

Answer 3

Sur CSS performance :

Arrière-plan vs background-color :

Comparaison des 18 échantillons de couleur de rendu 100 fois sur une page comme les petits de rectangles, une fois à fond et une fois avec la couleur d'arrière-plan.

Même si ces chiffres sont à partir d'un seul rechargement de la page, avec la suite rafraîchit le rendu temps ont changé, mais la différence en pourcentage est fondamentalement, la même à chaque fois.

C'est une économie de près de 42,6 ms, presque deux fois plus vite, lors de l'utilisation de arrière-plan au lieu de la couleur d'arrière-plan dans Safari 7.0.1. Chrome 33 semble être la même.

Ref : https://github.com/mdo/css-perf#background-vs-background-color

Answer 4

Avec background vous pouvez définir tous background des propriétés comme:

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

---

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

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

VS.

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

---

Plus d'infos

(Voir Légende: Fond - Abréviation de la propriété)

Answer 5

Une des différences:

Si vous utilisez une image comme arrière-plan de cette manière:

 background: url('Image Path') no-repeat;
 

alors vous ne pouvez pas le remplacer par la propriété "background-color".

Mais si vous utilisez l'arrière-plan pour appliquer une couleur, elle est identique à la couleur d'arrière-plan et peut être remplacée.

par exemple: http://jsfiddle.net/Z57Za/11/ et http://jsfiddle.net/Z57Za/12/