Explication détaillée du paramétrage de l'attribut background-image dans la production de pages html_HTML/Xhtml_Web

Pour les photos, la première chose à laquelle on pense est l'image de fond. Parce que beaucoup de nos décorations sont réalisées à l’aide d’images de fond. Dans ce cas, commençons par contrôler l’image d’arrière-plan avec CSS.

Définition et usage

L'attribut background-image définit l'image d'arrière-plan de l'élément.

L'arrière-plan de l'élément

occupe toute la taille de l'élément, y compris le remplissage et les bordures, mais pas les marges.

Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.

1. Image d'arrière-plan du contrôle CSS :

Pour une page Web, lorsque nous commençons à concevoir, nous ne pensons peut-être pas trop à ce qu'est l'image d'arrière-plan, car la plupart d'entre eux conçoivent simplement la couleur d'arrière-plan. Je pense que la raison est très simple, car elle est liée à la couleur d'arrière-plan. premier plan Tout comme la musique, cela aura un certain impact sur la vitesse d’ouverture d’une page Web. Cependant, pour un site Web personnel général ou un blog personnel, c'est bien sûr indispensable pour montrer sa propre personnalité. Bien sûr, rien n'est trop parfait, c'est-à-dire lorsque l'image n'est pas disponible mais lorsque CSS est activé. , le contenu de remplacement ne sera pas affiché, il n'est donc pas recommandé d'utiliser des images d'arrière-plan CSS pour le texte des boutons de navigation ou des situations similaires.
Il existe de nombreuses propriétés CSS pour contrôler les images d'arrière-plan. Tant qu'elles sont liées à l'image, la plupart d'entre elles seront utilisées.

(1). Importation d'images de fond :

Bien sûr, les plus connus sont background et background-image.
Le code pour concevoir des images d'arrière-plan pour les pages Web est :

corps {background:url("d:images

ou

corps {background-image:url("d:images

(2) Comment afficher l'image d'arrière-plan :

Bien sûr, vous ne pouvez pas exprimer l'effet souhaité en utilisant simplement le code ci-dessus. Car si l'image est petite, elle sera en mosaïque. Si elle est grande, des barres de défilement apparaîtront pour l'afficher, ce qui n'est pas bon. Par conséquent, nous devons effectuer davantage de contrôle d'affichage, c'est-à-dire que nous devons utiliser la répétition en arrière-plan, C'est la valeur :

répéter : valeur par défaut. L'image d'arrière-plan est en mosaïque verticalement et horizontalement

no-repeat : l'image d'arrière-plan n'est pas en mosaïque

repeat-x : l'image d'arrière-plan est uniquement en mosaïque horizontalement

repeat-y : l'image d'arrière-plan n'est en mosaïque que verticalement

Quant au code, je pense que quiconque connaît un peu le CSS le connaîtra, comme suit
 :

body {background:url("d:images

(3), contrôle de la taille de l'image d'arrière-plan :

Mais le problème est : que se passe-t-il si l'image est trop grande ? Pour une bonne page Web, il est préférable de ne pas utiliser d’images trop grandes, pour les raisons mentionnées ci-dessus, cela affecte la vitesse d’ouverture de la page Web. Nous ferions mieux d'utiliser PS ou FireWorks pour le traiter. Mais comme je l'ai mentionné, nous ne voulons pas utiliser CSS pour contrôler la taille de l'image.

Je pense que beaucoup de gens utiliseront naturellement le code suivant :

Copier le code

Le code est le suivant :