Au cours du processus de développement front-end, des images d’arrière-plan sont souvent ajoutées aux pages HTML pour des raisons de beauté. Alors, comment utiliser CSS pour définir une image comme arrière-plan en HTML ? Cet article vous expliquera comment définir une image d'arrière-plan en CSS. Les amis qui en ont besoin peuvent s'y référer et l'apprendre. J'espère que cela vous sera utile.
1. Aperçu du contexte
CSS peut ajouter des couleurs et des images d'arrière-plan, ainsi que des paramètres d'image.
L'attribut CSS background est une propriété qui définit spécifiquement l'arrière-plan. Vous pouvez définir la couleur d'arrière-plan ou l'image d'arrière-plan.
2. Attributs
1. couleur de fond
(1) Définition et utilisation : L'attribut background-color définit la couleur d'arrière-plan de l'élément
(2) Gamme d'arrière-plan de l'élément
La propriété background-color définit une couleur unie pour l'élément. Cette couleur remplit le contenu, le remplissage et les zones de bordure de l'élément, s'étendant jusqu'aux limites extérieures de la bordure de l'élément (mais pas les marges). Si la bordure comporte des parties transparentes (telles qu'une bordure en pointillés), la couleur d'arrière-plan apparaîtra à travers ces parties transparentes.
(3) valeur transparente
Bien que dans la plupart des cas, l'utilisation de transparents ne soit pas nécessaire. Cependant, si vous ne souhaitez pas qu'un élément ait une couleur d'arrière-plan et que vous ne souhaitez pas que les paramètres de couleur du navigateur de l'utilisateur affectent votre conception, il est toujours nécessaire de définir la valeur de transparence.
Utilisez background-color pour définir la couleur d'arrière-plan d'un élément :
<!DOCTYPEhtml><html><head><title>Arrière-plan CSS</title><style>#bg{color:white;background-color:blue;margin:20px;/*Définissez la marge extérieure sur 20px*/padding : 20px;/*Définissez la marge intérieure sur 20px*/border:10pxdottedwhite;/*Définissez une bordure pointillée jaune de 10px de large*/</style></head><body><pid=bg>attribut background-color< /p></body></html>Les résultats d'affichage sont les suivants :
À partir des résultats d'exécution, nous pouvons voir que l'attribut background-color peut définir un arrière-plan de couleur unie pour l'élément. Cette couleur remplira le contenu, le remplissage et la zone de bordure de l'élément (elle peut également être comprise comme la bordure et la zone de bordure). toutes les zones à l'intérieur). Pour l'élément Les zones en dehors de la bordure (marges) n'ont aucun effet.
2. background-image définit l'image d'arrière-plan
image d'arrière-plan:url(imgs/main_bg.jpg),
Si la propriété est définie dans le fichier CSS et que l'image n'est pas dans le dossier CSS, ajoutez le chemin devant elle pour revenir au dossier précédent.../
(1) L'attribut background-image définit l'image d'arrière-plan de l'élément.
(2) L'arrière-plan d'un élément occupe toute la taille de l'élément, y compris le remplissage et les bordures, mais pas les marges.
(3) Par défaut, l'image d'arrière-plan est située dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.
(4) url('URL') : Chemin pointant vers l'image.
Astuce : définissez une couleur d'arrière-plan disponible afin que la page soit belle si aucune image d'arrière-plan n'est disponible.
3. répétition de l'image d'arrière-plan
Par défaut, l'image de fond couvrira toute la page. Si l'image de fond n'est pas suffisamment grande pour couvrir toute la page, l'image de fond sera répétée en abscisse et en ordonnée ;
4. background-size définit la taille de l'image d'arrière-plan
5. background-position définit la position de l'image d'arrière-plan
Valeurs par défaut : gauche, bas, droite, haut, centre (centre)
Remarque : Vous pouvez également utiliser des valeurs numériques ou des pourcentages tels que background-position : 10px 10px représente la distance des coordonnées horizontales et verticales par rapport aux bordures gauche et supérieure ;
6. La pièce jointe en arrière-plan est-elle définie sur fixe ?
7.origine-arrière-plan
background-origin est une nouvelle propriété en CSS3. Lorsque vous utilisez l'attribut background-position pour définir la position de l'image d'arrière-plan, la position du coin supérieur gauche de l'élément est calculée par défaut. Vous pouvez également utiliser l'attribut background-origin pour définir la position relative de l'attribut background-position afin de positionner l'image d'arrière-plan. Les valeurs facultatives de l'attribut background-origin sont les suivantes :
8. clip d'arrière-plan
background-clip est un nouvel attribut en CSS3, grâce auquel la zone d'affichage de l'image d'arrière-plan peut être définie. Les valeurs facultatives pour l'attribut background-clip sont les suivantes :
Remarque : La translucidité de l'arrière-plan signifie que l'arrière-plan de la boîte est translucide et que le contenu à l'intérieur de la boîte n'est pas affecté.
9. contexte
background est l'abréviation de background attribut. Grâce à lui, vous pouvez non seulement définir un certain attribut d'arrière-plan pour un élément, mais également définir plusieurs ou tous les attributs d'arrière-plan en même temps. Il n'y a pas d'ordre fixe lors de la définition de plusieurs propriétés d'arrière-plan, mais il est recommandé d'utiliser l'ordre suivant :
couleur d'arrière-plan||image d'arrière-plan||position d'arrière-plan[/taille d'arrière-plan]?||répétition d'arrière-plan||attachement d'arrière-plan||origine d'arrière-plan||clip d'arrière-plan
Remarque : La différence entre l'image d'arrière-plan et l'attribut img :
(1) L'élément img appartient au concept HTML et l'image d'arrière-plan appartient au concept CSS.
(2) Lorsque l'image appartient à un contenu Web, l'élément img doit être utilisé
(3) Lorsque l'image sert uniquement à embellir la page, l'image de fond doit être utilisée