Maison > Article > interface Web > Comment changer la taille de l'image d'arrière-plan en CSS
Comment changer la taille de l'image d'arrière-plan en CSS
- 青灯夜游original
- 2021-11-10 17:05:5130261parcourir
En CSS, vous pouvez modifier la taille de l'image d'arrière-plan en définissant le style d'attribut background-size pour l'image d'arrière-plan. La fonction de cet attribut est de spécifier la taille de l'image d'arrière-plan. La syntaxe est "background-size : valeur de largeur valeur de hauteur ;".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez modifier la taille de l'image d'arrière-plan en définissant le style d'attribut background-size sur l'image d'arrière-plan.
L'attribut background-size spécifie la taille de l'image d'arrière-plan.
Syntaxe : background-size: length|percentage|cover|contain;
length 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 définie sur auto et
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"
cover qui conservera le rapport hauteur/largeur de l'image et redimensionnera l'image à la taille minimale qui couvrira complètement la zone de positionnement de l'arrière-plan.
contain Cela maintiendra 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">
<style>
div{
width: 400px;
height: 224px;
}
.box1{
background:url(img/2.jpg) no-repeat;
}
.box2{
background:url(img/2.jpg) no-repeat;
background-size: 200px 160px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div class="box1"></div>
<p>本身这个图片宽度为400px，高度224px</p>
<br />
<p><strong>通过CSS background-size修改后的背景图片</strong></p>
<div class="box2"></div>
</body>
</html>
(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!