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; }
Extrait # 2
body { background: blue; }
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; }
Extrait # 2
body { background: blue; }
Réponses:
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 background
s'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 background
raccourci, 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-color
moment 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
).
P { background: url("chess.png") gray 50% repeat fixed }
background
sera supercede tous les précédents background-color
, background-image
etc. spécifications. C'est essentiellement un raccourci, mais aussi une réinitialisation .
Je vais parfois l'utiliser pour remplacer les background
spé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 :
background
vs 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 vraimentbackground: #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
These kind of tests are cheats and always going to be somewhat inaccurate from the real world
github.com/mdo/css-perf#updated-conclusions-from-averages
Avec background
vous pouvez définir toutes les background
propriétés comme:
background-color
background-image
background-repeat
background-position
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;
(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 background
sé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 background
proprié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-image
sur 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.
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.
background
est le raccourci pour background-color
et 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-origin
et background-clip
: lorsque ces deux propriétés sont présentes, la première fait référence à -origin
et la seconde à -clip
.
Exemple:
background: content-box green padding-box;
Est équivalent à:
background-origin: content-box;
background-color: green;
background-clip: padding-box;
background-size
doit toujours suivre background-position
et les propriétés doivent être séparées par/
si background-position
est composé de deux nombres, le premier est la valeur horizontale et le second la valeur verticale.
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.
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
background
n'est-ce qu'un raccourci pour l'un des 5 attributs? Par conséquent, ce n'est pas pratique dans la vraie vie s'il y a position, couleur et image d'arrière-plan?