Maison  >  Article  >  interface Web  >  Comment définir la largeur et la hauteur de l'image d'arrière-plan à l'aide de background-size

Comment définir la largeur et la hauteur de l'image d'arrière-plan à l'aide de background-size

云罗郡主
云罗郡主avant
2018-10-18 15:43:1010263parcourir

Le contenu de cet article explique comment définir la largeur et la hauteur de l'image d'arrière-plan à l'aide de background-size. Les amis dans le besoin peuvent s'y référer.

Comment définir la largeur et la hauteur de limage darrière-plan à laide de background-size

Utilisez l'attribut background-size pour définir

语法:background-size: length|percentage|cover|contain;

longueur :
Définissez la hauteur et la largeur de l'image d'arrière-plan.
La première valeur définit la largeur et la deuxième valeur définit la hauteur.
Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».
(L'image entière sera affichée)

pourcentage :
Définit la largeur et la hauteur de l'image d'arrière-plan en pourcentage de l'élément parent.
La première valeur définit la largeur et la deuxième valeur définit la hauteur.
Si une seule valeur est définie, la deuxième valeur sera définie sur « auto ».
(affichera l'image entière)

couverture :
Conserve le rapport hauteur/largeur de l'image et redimensionne l'image à la plus petite taille qui couvrira complètement la zone de positionnement de l'arrière-plan .
Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone de positionnement d'arrière-plan.
(Afficher seulement une partie de l'image)

contenir :
Conserver les proportions de l'image et redimensionner l'image à la taille maximale qui couvrira complètement le positionnement de l'arrière-plan zone.
(L'image entière sera affichée, mais l'image peut être répétée)

Ce qui précède est une introduction complète sur la façon de définir la largeur et la hauteur de l'image d'arrière-plan à l'aide de background-size, si vous le souhaitez pour en savoir plus sur le Tutoriel vidéo HTML, veuillez faire attention au site Web PHP chinois.


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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer