Image d'arrière-plan d'étirement CSS?
Ce tutoriel montrera comment étirer les images d'arrière-plan avec CSS.
Comment étirer l'image d'arrière-plan avec CSS?
Pour étirer l'image d'arrière-plan avec CSS, essayez les instructions données.
Étape 1: Créez le premier conteneur div
Tout d'abord, ajoutez un "div”Conteneur en utilisant le"«Tag et attribuez-le un«identifiant”Attribut à l'intérieur du conteneur.
Étape 2: Ajouter un en-tête
Ajoutez une rubrique en utilisant le "”Tag dans le document HTML. Le "
”La balise est utilisée pour intégrer le niveau de niveau un.
Étape 3: Faites le deuxième conteneur div
Ensuite, créez un autre "”Container avec le"classe"Attribut, ajoutez une balise de tête"»Et intégrez le cap. Après cela, ajoutez un autre «» en suivant la même procédure:
taille arrière: couverture:
taille arrière: 100% automatique:
Étape 4: Style First Container Class
Ici, accédez à l'élément «» ayant une classe «img-1" avec l'aide de ".»Sélecteur et appliquez les propriétés suivantes de CSS:
Border: 3px RVB solide (240, 12, 12);
Largeur: 500px;
hauteur: 200px;
Contexte: URL (emoji.png);
taille arrière: couverture;
Ici:
- Le "frontière»La propriété définit une frontière autour de l'élément.
- "largeur”Définit la taille de l'élément horizontalement.
- "hauteur»Spécifie la taille de l'élément verticalement.
- "arrière-plan"Est utilisé pour allouer la couleur d'arrière-plan de l'élément.
- "taille de l'arrière-plan»Propriété avec le«couverture”La valeur est utilisée comme la taille de l'arrière-plan qui évolue l'image pour remplir le conteneur:
Étape 5: Style Second Container Class
Accédez au deuxième conteneur Div en utilisant le nom de classe «.img-2»Et appliquez les propriétés énumérées données:
Border: 3px RVB solide (226, 17, 17);
Largeur: 500px; / * Largeur d'écran * /
hauteur: 200px; / * hauteur d'écran * /
Contexte: URL (emoji.png);
République de fond: sans répétition;
taille arrière: 100% automatique;
Dans le bloc de code ci-dessus:
- Le "Répétition du fond»La propriété est utilisée pour répéter l'image le long des axes horizontaux et verticaux. Ici, la valeur est définie comme «sans répétition"Pour ne pas répéter l'image.
- Puis le "taille de l'arrière-plan"Est défini comme"100% automatique".
Sortir
On peut remarquer que nous avons réussi à étirer l'image de fond en utilisant CSS.
Conclusion
Pour étirer l'image d'arrière-plan, utilisez d'abord le «arrière-plan»Propriété pour définir l'image d'arrière-plan pour un élément avec la valeur comme«URL". Ensuite, utilisez la propriété CSS "taille de l'arrière-plan" comme "couverture" ou "100% automatique«Pour étirer l'image. Ce message vous a appris comment CSS étire l'image d'arrière-plan.