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

Cet article explique principalement comment utiliser le CSS pour étirer et remplir l'image d'arrière-plan afin d'éviter un affichage répété. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. Mais css3 apparaît. À l'avenir, cette situation d'affichage en double sera améliorée. L'attribut background-size peut réaliser notre espoir précédent d'étirer et de remplir l'image d'arrière-plan. La méthode d'utilisation spécifique est la suivante. Les amis intéressés peuvent s'y référer. J'espère que cela sera utile à tout le monde. 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 types d'images de fond :

1. Une toute grande image, dont la taille correspond exactement à la taille de la zone
2. Une toute petite image en barre, Après répétition, un grand fond d’image très régulier se forme.

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

#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 la valeur contenue) ):

#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; 
}

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

À propos des points de suspension qui apparaissent lorsque le texte CSS multiligne déborde

À propos de l'utilisation du symbole supérieur à dans les styles CSS et la gestion des méthodes d'héritage en CSS

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!