web-dev-qa-db-fra.com

Quelle est la difference entre background et background-color

Quelle est la différence entre spécifier une couleur d'arrière-plan à l'aide de background et background-color?

Extrait # 1 

body { background-color: blue; }

Snippet # 2 

body { background: blue; }
cssbackgroundbackground-color
240
stanigator

En supposant qu'il s'agisse de deux propriétés distinctes, dans votre exemple spécifique, il n'y a aucune différence dans le résultat, car background est en réalité un raccourci pour

couleur de fond
image de fond
position de fond
Répétition du fond
pièce jointe
clip de fond
fond-origine
taille de fond 

Ainsi, outre le background-color , à l’aide du raccourci background, vous pouvez également ajouter une ou plusieurs valeurs sans répéter une autre propriété background-* plusieurs fois.

Laquelle choisir dépend essentiellement de vous, mais cela dépend aussi des conditions spécifiques de vos déclarations de style (par exemple, si vous devez remplacer uniquement le background-color lorsque vous héritez d'autres propriétés background-* associées d'un élément les valeurs sauf le background-color).

223
fcalderan

background remplacera toutes les spécifications précédentes background-color, background-image, etc. C'est en gros un raccourci, mais un réinitialisation.

Je vais parfois l’utiliser pour écraser les spécifications background précédentes dans les personnalisations de modèles, pour lesquelles 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) seront réinitialisés à leurs valeurs par défaut.

143
Anriëtte Myburgh

À propos de performance CSS:

background vs background-color:

Comparaison de 18 échantillons de couleur rendus 100 fois sur une page aussi petit que rectangles, une fois avec background et une fois avec background-color.

Background vs background-color

Bien que ces chiffres proviennent d’une seule page, les prochains actualise les temps de rendu modifiés, mais la différence en pourcentage est de fondamentalement les mêmes à chaque fois.

C’est une économie de près de 42,6 ms, presque deux fois plus rapide avec l’utilisation de background au lieu de background-color dans Safari 7.0.1. Chrome 33 semble être à peu près le même.

Honnêtement, cela m'a époustouflé parce que pendant très longtemps pour deux raisons:

  • D'habitude, je plaide toujours pour des propriétés explicites dans les propriétés CSS, en particulier pour les arrière-plans, car elles peuvent avoir un impact négatif sur la spécificité.
  • J'ai pensé que lorsqu'un navigateur voit background: #000;, il voit vraiment background: #000 none no-repeat top center;. Je n'ai pas de lien vers une ressource ici, mais je me souviens de l'avoir lu quelque part.

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

73
l2aelba

Avec background, vous pouvez définir toutes les propriétés background telles que:

  • 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;

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é Abrégée))

23
alphanyx

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, celle-ci 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/

7
Ankit

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 permettent de définir les effets d'arrière-plan de un élément.

Propriétés CSS utilisées pour les effets de fond:

  • couleur de fond 
  • image de fond 
  • répétition du fond 
  • pièce jointe 
  • position de fond

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

3
Chuck Norris

Ils sont les mêmes. Il existe plusieurs sélecteurs d’arrière-plan (à savoir background-color, background-image, background-position) et vous pouvez y accéder via le sélecteur background plus simple ou plus spécifique. Par exemple:

background: blue url(/myImage.jpg) no-repeat;

ou

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
3
DC_

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

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

En pratique, le raccourci a tendance à être un peu plus sûr. Il s'agit d'une précaution (incomplète mais utile) contre l'obtention accidentelle de propriétés d'arrière-plan inattendues, telles qu'une image d'arrière-plan, à partir d'une autre feuille de style. En plus, c’est plus court. Mais vous devez vous rappeler que cela signifie réellement “définir toutes les propriétés de l'arrière-plan”.

3
Jukka K. Korpela

background est le raccourci pour background-color et quelques autres éléments liés à l’arrière-plan (voir ci-dessous):

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

Lisez la déclaration ci-dessous du W3C:

Contexte - Propriété abrégée

Pour raccourcir le code, c'est Il est également possible de spécifier toutes les propriétés d'arrière-plan dans un seul fichier propriété. Ceci s'appelle une propriété abrégée.

La propriété abrégée pour background est background:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Lors de l'utilisation de la propriété raccourcie, l'ordre des valeurs de la propriété est le suivant:

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

Peu importe si l'une des valeurs de propriété est manquante, aussi longtemps comme les autres sont dans cet ordre.

1
Alireza

Comparaison de 18 échantillons de couleur rendus 100 fois sur une page aussi petit que rectangles, une fois avec le fond et une fois avec la couleur de fond.

J'ai recréé l'expérience CSS performance et les résultats sont très différents de nos jours.

background

Chrome 54: 443 (µs/div)

Firefox 49: 162 (µs/div)

Edge 10: 56 (µs/div)

background-color

Chrome 54: 449 (µs/div)

Firefox 49: 171 (µs/div)

Edge 10: 58 (µs/div)

Comme vous le voyez, il n'y a presque pas de différence.

1
Marcin Biernacki

C'est la meilleure réponse. Le raccourci (arrière-plan) sert à la réinitialisation et à DRY (à combiner avec le raccourci).

1
Jonh Doe

J'ai constaté que vous ne pouvez pas définir de dégradé avec la couleur d'arrière-plan.

Cela marche: 

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Cela ne veut pas: 

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
0
Vörös Amadea

J'ai remarqué lors de la génération d'e-mails pour Outlook ...

/*works*/
background: gray;

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

Vous pouvez faire de belles choses une fois que vous comprenez que vous pouvez jouer avec l'héritage avec cela. Cependant, commençons par comprendre quelque chose de ce document sur le fond:

Avec CSS3, vous pouvez appliquer plusieurs arrière-plans aux éléments. Ceux-ci sont superposés les uns sur les autres avec le premier arrière-plan que vous fournissez en haut et le dernier fond énuméré dans le dos. Seul le dernier fond peut inclure une couleur de fond.

Alors quand on fait:

background: red;

Il définit la couleur d'arrière-plan sur rouge car le rouge est la dernière valeur répertoriée.

Quand on fait:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Le rouge est à nouveau la couleur de fond MAIS vous verrez un dégradé.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }
    <div class="box">
      
     </div>

Maintenant la même chose avec la couleur de fond:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }
    <div class="box">
      
     </div>

La raison en est que parce que quand nous faisons cela:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Le dernier numéro définit la couleur de fond.

Ensuite, dans le passé, nous héritons de l'arrière-plan (puis du dégradé) ou de la couleur d'arrière-plan, puis du rouge.

0
Ced