Une brève analyse de l'utilisation de l'arrière-plan en CSS

Le contenu de cet article concerne une brève analyse de l'utilisation de l'arrière-plan en CSS. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Définition et utilisation

Attributs de base : couleur, image, position, répétition

Couleur de fondbackground-color

La valeur est la valeur de la couleur ou transparent Choisissez l'une des deux, la valeur par défaut est transparent (transparent).

• La valeur de couleur peut être un code de couleur hexadécimal ou une valeur de couleur RVB, ou elle peut être un code anglais. Il n'est pas recommandé d'utiliser des codes anglais. Différents navigateurs peuvent avoir des effets différents sur différents codes de couleur.

• Il est également important de définir une couleur d'arrière-plan comme solution de repli. Les couleurs d'arrière-plan sont prises en charge partout, tandis que les fonctionnalités plus exotiques telles que les dégradés d'arrière-plan ne sont prises en charge que dans les navigateurs les plus récents, et les images d'arrière-plan peuvent ne pas se charger pour une raison quelconque. Par conséquent, c'est une bonne idée de définir une couleur d'arrière-plan de base et de spécifier ces propriétés, afin que le contenu de l'élément soit lisible quoi qu'il arrive.

Image d'arrière-plan background-image

Spécifiez l'image d'arrière-plan à afficher, utilisez url() pour définir le chemin.

• La méthode de répétition d'image par défaut consiste à répéter à la fois horizontalement et verticalement.

Répéter l'arrière-planbackground-repeat

Spécifie comment l'image d'arrière-plan se répète. La valeur par défaut est repeat (répétez jusqu'à ce que tout l'arrière-plan de l'élément soit rempli)

.

值	描述
no-repeat	不重复
repeat	垂直和水平都重复
repeat-x	X轴方向（水平）重复
repeat-y	Y轴方向（垂直）重复

Position de l'arrière-planbackground-position

Spécifiez la position de l'image d'arrière-plan, l'origine est le coin supérieur gauche (0,0).

• Vous pouvez saisir deux valeurs pour représenter l'axe X et l'axe Y, ou vous pouvez saisir une seule valeur.

• Vous pouvez saisir des valeurs de longueur (px, etc.), des valeurs relatives (rem, etc.), des pourcentages, des mots-clés (left, center, right, top, bottom)

• Si vous saisissez une seule valeur, elle représente la valeur de l'axe X, et l'axe Y devient center

• Les valeurs peuvent être mélangées, telles que background-position:9px top;

Attributs supplémentaires

Défilement d'arrière-plan background-attachment

Spécifiez comment l'arrière-plan défile lorsque le contenu défile.

值	描述
scroll	默认值。滚动，背景图随着页面的滚动而移动。
fixed	固定，当页面的其余部分滚动时，背景图像不会移动。

Recommandations associées :

Utilisation de l'attribut border-sizing en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!