Comment étirer l'image d'arrière-plan et remplir du CSS pour éviter un affichage répété

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, p, span). Les valeurs de longueur et de 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 y a donc deux catégories qui sont généralement utilisées comme images de fond :
1 Il s'agit d'une toute grande image, dont la taille correspond exactement à la taille de la zone
2. graphique à barres, après répétition, formant un grand fond d'image très régulier.
Mais après l'émergence du 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 cet attribut peut être utilisé 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{ 
background-size:200px 100px; 
} 
　　

Taille de l'image d'arrière-plan (représentation en pourcentage) :

#background-size2{ 
background-size:30% 60%; 
}

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

#background-size3{ 
background-size:cover; 
}

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

#background-size4{ 
background-size:contain; 
}

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) :

#background-size5{ 
background-size:auto; 
}

Plus de css Comment faire en sorte que le l'image d'arrière-plan s'étire et se remplit pour éviter un affichage répété. Veuillez vous référer aux articles connexes Suivez le site Web PHP chinois !