Maison > Article > interface Web > Comment définir la taille de l'image d'arrière-plan en CSS
Comment définir la taille de l'image d'arrière-plan en CSS
- 王林original
- 2021-05-18 15:46:019892parcourir
La façon de définir la taille de l'image d'arrière-plan en CSS consiste à ajouter l'attribut background-size à l'image d'arrière-plan et à définir la valeur de l'attribut sur la largeur et la hauteur requises, telles que [background-size : 80px 60px;].
L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.
Il existe un attribut background-size en CSS, qui est spécialement utilisé pour spécifier la taille de l'image d'arrière-plan.
Syntaxe :
background-size: length|percentage|cover|contain;
Valeur de l'attribut :
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 donnée, la seconde est réglée sur auto (automatique)
pourcentage calculera le pourcentage de la zone de positionnement par rapport à l'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 donnée, la seconde est définie sur "auto"
couverture qui maintiendra le rapport hauteur/largeur de l'image et redimensionnera l'image pour couvrir complètement le positionnement de l'arrière-plan. Le minimum taille de la région.
contain conservera les proportions de l'image et redimensionnera l'image à la taille maximale qui tiendra dans la zone de positionnement d'arrière-plan.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>Résultat de l'exécution :
Recommandations associées : vidéo CSS Tutoriel
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!