Commentaire: Cependant, après l'apparition de CSS3, la situation d'affichage répétée a été améliorée. La propriété de la taille de l'arrière-plan peut faire de notre espoir et remplir l'image d'arrière-plan. La méthode d'utilisation spécifique est la suivante. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
Comment faire le remplissage d'étirement de l'image d'arrière-plan, cette question semble simple. Mais je suis désolé de vous le dire. Pas aussi simple que nous le pensons.Par exemple, définissez un arrière-plan dans un conteneur (corps, div, span). La longueur et la valeur de largeur de cet arrière-plan ne peuvent pas être modifiées avant CSS2.1.
Le résultat réel est donc qu'il ne peut être affiché que répété, de sorte que les propriétés telles que répéter, répéter-x, répéter-y, sans répétition apparaissent. Il est utilisé pour contrôler l'affichage des images d'arrière-plan. Par conséquent, il existe deux types d'images d'arrière-plan:
1. C'est une grande image, la taille et la taille de la zone correspondent juste
2. Un très petit graphique à barres, après avoir traversé la répétition, forme un fond d'image très régulier.
Cependant, après l'apparition de CSS3, cette situation a été améliorée. La propriété de taille arrière peut réaliser nos espoirs précédents.
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):
# background-size {
taille arrière: 200px 100px;
}
Taille de l'image d'arrière-plan (représentation en pourcentage):
# background-size2 {
taille arrière: 30% 60%;
}
Taille de l'image d'arrière-plan (équivalent pour étendre l'image pour remplir l'élément, c'est-à-dire la valeur de la couverture):
# background-size3 {
taille arrière: couverture;
}
Taille de l'image d'arrière-plan (réduisez l'image dans un rapport égal pour s'adapter à la taille de l'élément, c'est-à-dire contient de la valeur):
# background-size4 {
taille arrière: contenir;
}
Taille de l'image d'arrière-plan (remplit les éléments avec la taille de l'image elle-même, c'est-à-dire la valeur automatique):
# background-size5 {
taille arrière: auto;
}