CSS pour réaliser l'étirement et le remplissage de l'image d'arrière-plan

Tout d'abord, nous savons qu'il existe deux types d'images de fond :

(apprentissage recommandé : démarrage rapide css)

1. Une grande image entière, dont la taille correspond exactement à la taille de la zone

2. Une très petite image en barres, après répétition, forme un grand fond d'image très régulier.

Alors, comment étirer et remplir l'image d'arrière-plan ?

La méthode est la suivante :

Taille de l'image de fond (représentation numérique) :

Le code est le suivant :

#background-size{
background-size:200px 100px;
}

Taille de l'image de fond (pourcentage représentation) :

Le code est le suivant :

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

Le le code est le suivant :

#background-size3{
background-size:cover;
}

Taille de l'image d'arrière-plan (réduire l'image proportionnellement pour l'adapter à la taille de l'élément, c'est-à-dire la valeur contenue) :

Le code est le suivant :

#background-size4{
background-size:contain;
}

Taille de l'image d'arrière-plan (en remplissant l'élément avec la propre taille de l'image, c'est-à-dire la valeur automatique) :

Le code est le suivant :

#background-size5{
background-size:auto;
}

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!