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

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

Extrait n ° 1

 body { background-color: blue; } 

Extrait n ° 2

 body { background: blue; } 

En supposant 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, puisque l’ background est en fait un raccourci pour

Couleur de fond
image de fond
position de fond
Répétition du fond
pièce jointe
clip d’arrière-plan
origine de fond
taille de fond

Ainsi, en plus de la background-color , en utilisant le raccourci d’ backgroundbackground vous pouvez également append une ou plusieurs valeurs sans répéter une autre propriété background-* plus d’une fois.

Le choix est essentiellement à vous, mais cela peut aussi dépendre des conditions spécifiques de vos déclarations de style (par exemple, si vous devez remplacer uniquement la background-color lors de l’inheritance d’autres propriétés d’ background-* associées d’un élément parent ou si vous besoin de supprimer toutes les valeurs sauf la background-color ).

backgroundbackground remplacera toutes les spécifications précédentes background-color background-image , d’ background-image , etc. C’est essentiellement un raccourci, mais aussi une réinitialisation .

Je l’utilise parfois pour remplacer les spécifications d’ background précédentes dans les personnalisations de modèles, où je souhaiterais que:

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

être le suivant:

background: black;

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

A propos des performances CSS :

background vs background-color :

Comparaison de 18 échantillons de couleurs rendus 100 fois sur une page sous forme de petits rectangles, une fois avec un arrière- plan et une fois avec une couleur d’ arrière-plan .

Fond vs couleur de fond

Bien que ces nombres proviennent d’un rechargement d’une seule page, les temps de rendu ont été modifiés avec les rafraîchissements suivants, 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 lorsque vous utilisez 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.

Cela m’a honnêtement fait sauter parce que pour la plus longue période pour deux raisons:

  • Je préconise généralement toujours explicitement les propriétés CSS, en particulier avec les arrière-plans, car cela peut nuire à la spécificité.
  • Je pensais que quand un navigateur voit en background: #000; , ils voient vraiment le 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 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 la légende: Contexte – Propriété sténographique)

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/

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 de fond:

  • Couleur de fond
  • image de fond
  • Répétition du fond
  • pièce jointe
  • position de fond

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

Ils sont les mêmes. Il existe plusieurs sélecteurs d’ background-color (par exemple background-color background-image , background-image background-position , background-position ) et vous pouvez y accéder via le sélecteur d’ 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; 

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 ne spécifiez que par exemple une valeur de couleur, car les autres propriétés sont alors définies sur leurs valeurs initiales, par exemple background-image to none .

Cela ne signifie pas qu’il remplacera toujours les autres parameters de ces propriétés. Cela dépend de la cascade selon les règles habituelles, généralement mal comsockets.

En pratique, la sténographie a tendance à être un peu plus sûre. C’est une précaution (non complète, mais utile) de ne pas obtenir accidentellement des 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».

background est le raccourci pour la background-color d’ background-color et quelques autres éléments 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é. Cela s’appelle une propriété raccourcie.

La propriété abrégée pour l’arrière-plan est l’arrière-plan:

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

Lors de l’utilisation de la propriété abrégée, 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.

C’est la meilleure réponse. La sténographie (arrière-plan) sert à réinitialiser et à sécher (combiner avec le longhand).

Comparaison de 18 échantillons de couleurs rendus 100 fois sur une page sous forme de petits rectangles, une fois avec un arrière-plan et une fois avec une couleur d’arrière-plan.

J’ai recréé l’expérience de performance CSS et les résultats sont sensiblement 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)

Bord 10 : 58 (µs / div)

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

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 bien ordonnés une fois que vous avez compris que vous pouvez jouer avec l’inheritance avec ceci. Cependant, comprenons d’abord quelque chose de cette doc sur le fond:

Avec CSS3, vous pouvez appliquer plusieurs arrière-plans à des éléments. Celles-ci sont superposées 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 la couleur de fond encore une fois, 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; } 
  

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

la différence de ceci, lors de l’utilisation d’arrière-plan, parfois lors de la création d’une page Web en arrière-plan CSS: #fff // peut survoler un bloc d’image Mask (“top item, text ou image”)) couleur pour une utilisation sûre, dans votre conception si son individu

J’ai trouvé que vous ne pouvez pas définir un 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)); 

Ce n’est pas:

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

Une chose que j’ai remarquée dans la documentation est l’utilisation de background: url("image.png")

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

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