Comment contrôler la couleur d'arrière-plan d'une page Web avec CSS

En parlant d'arrière-plan, il n'y a que des couleurs d'arrière-plan et des images en couleur, je pense que tout le monde doit savoir qu'il faut ajouter bgcolor="#808080" et background="URL" à ces deux-là, n'est-ce pas ? , mais ce que je vais présenter ici n'est pas de faire cela, mais d'utiliser des styles CSS. Même si c'est un peu gênant, la coordination globale est toujours très bonne.

Couleur de fond background-color

Je ne pense pas avoir besoin de présenter cela davantage, je pense que tout le monde connaît le code couleur. Soit utilisez l'anglais à la place, soit utilisez représenté. par le code spécifié. La valeur par défaut est transparente. Exemple :

body{background-color:yellow} 
H1{background-color:#000000}

(Tutoriel recommandé : Tutoriel de démarrage CSS)

Image d'arrière-plan background-image

Image d'arrière-plan et background Les paramètres de couleur en HTML sont fondamentalement les mêmes et peuvent être complétés en ajoutant des instructions pertinentes. Mais ici, je ne fais pas référence à cette méthode, la méthode que j'utilise est toujours du CSS. La fonction principale de background-image est d'afficher des images. Si vous avez besoin d'afficher une image, ajoutez simplement l'url (l'adresse de l'image) à la fin. Si vous ne l'affichez pas, c'est la chose la plus simple. Ce n'est pas le cas, car la valeur par défaut est none, et si vous souhaitez l'ajouter, ajoutez simplement none à la fin. Exemple :

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')
} 
h1
{
background-image:url('none')
}

Lorsque vous utilisez les images d'arrière-plan dans la page, vous devez souvent rencontrer des images trop petites, ce qui entraîne diverses images récurrentes qui détruisent la beauté de la page entière. Vous souhaitez passer à d'autres. images mais il peut s'agir d'une situation gênante telle qu'un caractère inapproprié. Mais maintenant, tant que vous utilisez les méthodes suivantes pour contrôler les images en CSS, vous n'aurez plus de tels problèmes à l'avenir.

Si l'image est affichée à plusieurs reprises en arrière-plan, répétez

Parfois, un affichage répété est nécessaire, mais parfois un affichage répété est un casse-tête. Maintenant, cela peut être très utile et vous aidera. , et cela peut également vous aider à contrôler la façon dont les images sont répétées (répétez horizontalement, répétez verticalement et répétez dans les deux sens). Pour obtenir une répétition dans ces trois directions, suivez simplement bcackground-repeat Add Repeat-x (étalement horizontal. direction), répéter-y (étaler dans le sens vertical), répéter (étaler dans les deux sens).

Bien entendu, il peut contrôler la duplication des images ou la non-duplication des images. no-repeat est utilisé pour indiquer qu'une seule image d'arrière-plan est affichée au lieu d'être répétée. Ce n'est pas la valeur par défaut. La valeur par défaut est d'afficher l'image d'arrière-plan à plusieurs reprises (répéter). Exemple :

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat
}

Positionnement de la position d'affichage de l'image background-position

Une image d'arrière-plan n'est souvent pas suffisante après les paramètres ci-dessus, car lorsque vous utilisez les paramètres ci-dessus, elle est non répété Une fois l'affichage défini, l'image ne sera affichée que dans le coin supérieur gauche de la page et pas ailleurs. Cependant, si vous souhaitez que cette image d'arrière-plan apparaisse au milieu ou ailleurs, alors background-position peut vous aider, car il utilise Pour afficher une position par rapport au coin supérieur gauche de l'image (la valeur par défaut est 0% 0%), elle est définie par deux valeurs, séparées par un espace.

Ses valeurs principales sont left　centerright et topcenterbottom Vous pouvez également utiliser une valeur en pourcentage pour spécifier une position relative ou une valeur pour spécifier une position absolue. Par exemple, 50 % indique que la position est dans le. centre, et une valeur horizontale de 50 px signifie que l'image est déplacée horizontalement de 50 px à partir du coin supérieur gauche ; ce qui est particulièrement souligné ici est que 1. Lorsque vous définissez la valeur, vous ne fournissez qu'une seule valeur, qui est équivalente. pour spécifier uniquement la position horizontale, et la position verticale est automatiquement définie sur 50 % ; 2Lorsque la valeur que vous définissez est un nombre négatif, cela signifie que l'image d'arrière-plan dépasse la limite. Exemple :

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-position:100px 10px
}

Contrôler si l'image défile en arrière-plan-attachement

Les deux étapes ci-dessus peuvent vous aider à terminer le positionnement de l'image, mais elles ne sont pas parfaites après l'avoir fait donc Parce que si votre page a une barre de défilement, votre image d'arrière-plan ne sera pas positionnée à cette position pour toujours. Si vous souhaitez que l'image soit positionnée à cette position pour toujours, vous ne pouvez laisser l'image défiler qu'avec le contenu de la page. . En ce qui concerne le défilement, background-attachment peut vous aider pour le moment. Il vous suffit d'ajouter un défilement (statique) et un fixe (défilement).

Bien sûr, je ne vous laisse pas l'ajouter au hasard. Après tout, le défilement est la valeur par défaut, ce qui signifie que l'image n'est pas autorisée à défiler avec le contenu de la page. Exemple :

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-attachment:fixed
}

D'accord, après les paramètres ci-dessus, je pense que votre arrière-plan sera plus beau, mais trop de code a souvent une mauvaise lisibilité et est sujet aux erreurs, alors ici Ce que je veux vous dire, c'est que vous peut utiliser tous les codes ci-dessus ensemble, c'est-à-dire ajouter les codes associés ci-dessus à l'arrière-plan.

Lors de l'ajout du code à l'arrière-plan, ajoutez un espace entre chaque valeur pour la séparer, et ne placez pas le code de couleur d'arrière-plan derrière l'URL de l'image d'arrière-plan pour éviter que l'image ne s'affiche. Exemple :

body
{
background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') 
fixed 100px 50px no-repeat
}

Remarque : Si vous utilisez du code pour l'insérer directement, vous devez mettre le code suivant à l'intérieur puis entre pour l'afficher normalement !

Tutoriels vidéo associés recommandés : Tutoriel vidéo 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!