Comment étirer l'image d'arrière-plan et remplir du CSS pour éviter les compétences répétées du didacticiel display_html5

Comment étirer et remplir l’image d’arrière-plan, cette question semble simple. Mais je suis désolé de vous le dire. Ce n'est pas aussi simple qu'on le pense.
Par exemple, définissez un arrière-plan dans un conteneur (body, div, span). La longueur et la largeur de ce fond ne peuvent pas être modifiées avant CSS2.1.
Ainsi, le résultat réel ne peut être affiché que de manière répétée, de sorte que les attributs répétition, répétition-x, répétition-y et non-répétition apparaissent. Il est utilisé pour contrôler l’affichage des images d’arrière-plan. Il existe donc deux types d'images de fond :

1. Une toute grande image, dont la taille correspond exactement à la taille de la zone
2. Une très petite image en barre, Après avoir répété , un grand fond d'image très régulier est formé.

Mais après l'émergence de CSS3, cette situation s'est améliorée. La propriété de taille d'arrière-plan peut réaliser nos souhaits antérieurs.
Et cette propriété peut être utilisée sur Firefox, Chrome et ie9.

La méthode d'utilisation spécifique est la suivante :
Taille de l'image d'arrière-plan (représentation numérique) :

Taille de l'image de fond (exprimée en pourcentage) :


Taille de l'image d'arrière-plan (agrandissez l'image proportionnellement pour remplir l'élément, cela est, valeur de couverture) :


Taille de l'image d'arrière-plan (réduire l'image proportionnellement pour l'adapter à la taille de l'élément, c'est-à-dire la valeur contenue) :


Taille de l'image d'arrière-plan (remplissez l'élément avec la taille de l'image elle-même, c'est-à-dire la valeur automatique) :