Quelle est la différence entre le fond et la couleur de fond

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

Extrait # 1

body { background-color: blue; }

Extrait # 2

body { background: blue; }

Prémettant que ce sont deux propriétés distinctes, dans votre exemple spécifique, il n'y a pas de différence dans le résultat, car il backgrounds'agit en fait d'un raccourci pour

background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size

Ainsi, outre le background-color, en utilisant le backgroundraccourci, vous pouvez également ajouter une ou plusieurs valeurs sans répéter aucune autre background-*propriété plus d'une fois.

Le choix dépend essentiellement de vous, mais cela peut également dépendre des conditions spécifiques de vos déclarations de style (par exemple, si vous devez remplacer uniquement le background-colormoment où vous héritez d'autres background-*propriétés connexes d'un élément parent, ou si vous devez supprimer toutes les valeurs sauf le background-color).

backgroundsera supercede tous les précédents background-color, background-imageetc. spécifications. C'est essentiellement un raccourci, mais aussi une réinitialisation .

Je vais parfois l'utiliser pour remplacer les backgroundspécifications précédentes dans les personnalisations de modèle, 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) seront remis à leurs valeurs par défaut.

À propos des performances CSS :

backgroundvs background-color:

Comparaison de 18 échantillons de couleur rendus 100 fois sur une page sous forme de petits rectangles, une fois avec fond et une fois avec couleur de fond .

Bien que ces chiffres proviennent d'un rechargement d'une seule page, avec les actualisations suivantes, les temps de rendu ont changé, mais la différence en pourcentage était fondamentalement la même à chaque fois.

Cela représente une économie de près de 42,6 ms, presque deux fois plus rapide , lors de l'utilisation de l'arrière-plan au lieu de la couleur d'arrière-plan dans Safari 7.0.1. Chrome 33 semble être à peu près le même.

Honnêtement, cela m'a époustouflé parce que pendant la plus longue période pour deux raisons:

• Je plaide généralement toujours pour une explication dans les propriétés CSS, en particulier avec les arrière-plans car cela peut nuire à la spécificité sur la route.
• Je pensais 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 avoir lu ceci quelque part.

Réf: https://github.com/mdo/css-perf#background-vs-background-color

Avec backgroundvous pouvez définir toutes les backgroundpropriétés comme:

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

Avec background-colorvous 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 la légende: Contexte - propriété de sténographie)

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 avec la propriété "background-color".

Mais si vous utilisez l'arrière-plan pour appliquer une couleur, c'est la même chose que l'arrière-plan et peut être remplacé.

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

Ils sont tous les deux identiques. Il existe plusieurs sélecteurs d'arrière-plan (c.-à background-color- d . background-image, background-position) Et vous pouvez y accéder via le backgroundsélecteur le plus simple ou le 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;

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

Cela ne signifie pas qu'il remplacerait 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, le raccourci a tendance à être quelque peu plus sûr. C'est une précaution (non complè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 vraiment «définir toutes les propriétés d'arrière-plan».

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 l'arrière plan
• image de fond
• Répétition du fond
• fond-attachement
• position de fond

La propriété d'arrière-plan comprend toutes ces propriétés et vous pouvez simplement les écrire sur une seule ligne.

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

Comparaison de 18 échantillons de couleur rendus 100 fois sur une page sous forme de petits rectangles, une fois avec fond et une fois avec couleur de fond.

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

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (µs / div)

Bord 10 : 56 (µs / div)

background-color

Chrome 54 : 449 (µs / div)

Firefox 49 : 171 (µs / div)

Edge 10 10:58 (µs / div)

Comme vous le voyez - il n'y a presque aucune différence.

backgroundest le raccourci pour background-coloret quelques autres trucs liés à l'arrière-plan comme ci-dessous:

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

Lisez la déclaration ci-dessous du W3C:

Contexte - Propriété sténographique

Pour raccourcir le code, il est également possible de spécifier toutes les propriétés d'arrière-plan dans une seule propriété. C'est ce qu'on appelle une propriété abrégée.

La propriété de raccourci pour le fond est background:

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

Lorsque vous utilisez la propriété raccourcie, l'ordre des valeurs de 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, tant que les autres sont dans cet ordre.

J'ai trouvé que vous ne pouvez pas définir un dégradé avec une couleur de fond.

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

background est une propriété abrégée pour les éléments suivants:

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

Vous pouvez obtenir des informations détaillées sur chaque propriété ici

Ordre des propriétés

Dans la plupart des implémentations de navigateur (je pense qu'un navigateur plus ancien pourrait présenter des problèmes), l'ordre des propriétés n'a pas d'importance, sauf pour:

• background-originet background-clip: lorsque ces deux propriétés sont présentes, la première fait référence à -originet la seconde à -clip.

  Exemple:

  background: content-box green padding-box;

  Est équivalent à:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizedoit toujours suivre background-positionet les propriétés doivent être séparées par/

• si background-positionest composé de deux nombres, le premier est la valeur horizontale et le second la valeur verticale.

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

/*works*/
background: gray;

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

Vous pouvez faire des trucs assez soignés 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 en arrière-plan:

Avec CSS3, vous pouvez appliquer plusieurs arrière-plans aux éléments. Ceux-ci sont superposés avec le premier arrière-plan que vous fournissez en haut et le dernier arrière-plan répertorié à l'arrière. Seul le dernier arrière-plan peut inclure une couleur d'arrière-plan.

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 d'arrière-plan 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 pour laquelle cela se produit est que lorsque nous faisons cela:

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

Le dernier nombre définit la couleur d'arrière-plan.

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

J'ai remarqué une chose que je ne vois pas dans la documentation background: url("image.png")

main courte comme ci-dessus si l'image n'est pas trouvée, elle envoie un code 302 au lieu d'être ignorée comme si vous utilisez

background-image: url("image.png") 

Il y a un bug concernant le fond et la couleur de fond

la différence, lors de l'utilisation de l'arrière-plan, parfois lors de la création d'une page Web en arrière-plan CSS: #fff // peut remplacer un bloc d'image de masque ("élément supérieur, texte ou image")), il est donc préférable de toujours utiliser background- couleur pour une utilisation en toute sécurité, dans votre conception si son individu