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). 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 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. Une très petite barre d'image. Après répétition, un grand fond d'image très régulier est formé.

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

Le code est le suivant :

#background-size{ 
background-size:200px 100px; 
}

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

Le code est le suivant :

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

Le code est le suivant ; (Remplissez l'élément avec la taille de l'image elle-même, c'est-à-dire la valeur automatique) :

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

Le code est le suivant :

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!