Maison > développement back-end > tutoriel php > Comment étirer et remplir l'image d'arrière-plan à l'aide de CSS pour éviter un affichage répété

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

不言
Libérer: 2023-04-01 08:34:02
original
2044 Les gens l'ont consulté

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; 
}
Copier après la connexion

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

#background-size2{ 
background-size:30% 60%; 
}
Copier après la connexion

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; 
}
Copier après la connexion

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; 
}
Copier après la connexion

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; 
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal