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

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.

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.

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.

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

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!