Maison > interface Web > tutoriel CSS > Comment afficher complètement l'image d'arrière-plan en CSS

Comment afficher complètement l'image d'arrière-plan en CSS

WBOY
Libérer: 2021-12-02 16:03:24
original
18449 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut "background-size" pour afficher complètement l'image d'arrière-plan. Cet attribut est utilisé pour spécifier la taille de l'image d'arrière-plan. Il vous suffit d'ajouter l'attribut "background-size:100% 100%". ;" à l'élément. L'image d'arrière-plan est entièrement affichée.

Comment afficher complètement l'image d'arrière-plan en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment afficher entièrement l'image d'arrière-plan en CSS

Lorsque vous utilisez div+css pour créer une page Web, il est parfois nécessaire d'afficher l'intégralité de l'image d'arrière-plan dans le div Alors, comment utiliser les paramètres CSS ? L'exemple suivant explique comment div+css contrôle l'affichage complet de l'image d'arrière-plan.

1. Créez un nouveau fichier html, nommé test.html, pour expliquer comment div+css contrôle l'affichage complet des images d'arrière-plan. Créez un module à l'aide de balises div pour ajouter des images d'arrière-plan. Définissez l'attribut de classe de la balise div sur mydiv, qui est principalement utilisé pour définir le style CSS via cette classe ci-dessous. Écrivez la balise , et le style CSS de la page sera écrit dans la balise.

Définissez le style CSS du div via le nom de classe mydiv, utilisez l'attribut width pour définir la largeur du div à 300 px et utilisez l'attribut height pour définir la hauteur du div à 300 px.

Comment afficher complètement limage darrière-plan en CSS

2. Dans la balise CSS, définissez l'image d'arrière-plan du div sur l'image 1.jpg sous le dossier images via l'attribut background-image et utilisez background-size pour définir le rapport largeur/hauteur du div. l'image d'arrière-plan à 100 %, c'est-à-dire que l'intégralité de l'image d'arrière-plan sera affichée.

Comment afficher complètement limage darrière-plan en CSS

Ouvrez le fichier test.html dans le navigateur pour voir l'effet.

Comment afficher complètement limage darrière-plan en CSS

Résumé :

1. Créez un fichier test.html.

2. Créez un module div dans le fichier.

3. Dans la balise CSS, définissez la largeur, la hauteur et l'image d'arrière-plan du div, puis définissez la largeur et la hauteur de l'arrière-plan à 100 % via l'attribut background-size pour afficher l'intégralité de l'image d'arrière-plan.

Remarque :

Si le rapport de largeur du div est différent du rapport de largeur et de hauteur de l'image, le paramètre de l'image d'arrière-plan sera entièrement affiché, ce qui entraînera une déformation.

(Partage de vidéos d'apprentissage : Tutoriel vidéo 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:
css
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