Maison > Article > interface Web > Comment changer la taille de l'image d'arrière-plan avec CSS
Comment changer la taille de l'image d'arrière-plan avec CSS
- 青灯夜游original
- 2021-10-12 18:13:2826935parcourir
En CSS, vous pouvez utiliser l'attribut background-size pour modifier la taille de l'image d'arrière-plan. La fonction de cet attribut est de spécifier la taille de l'image d'arrière-plan. Vous pouvez modifier la taille de l'image en définissant la valeur de l'attribut sur a. valeur de longueur ou un pourcentage, ou en définissant la valeur de l'attribut. Utilisez la couverture et contient des mots-clés pour redimensionner l'image.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, si vous souhaitez modifier la taille de l'image d'arrière-plan, vous pouvez définir l'attribut background-size.
L'attribut background-size peut spécifier la taille de l'image d'arrière-plan. Format de 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 maintiendra 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 conservera les proportions de l'image et redimensionnera l'image à la taille maximale qui tiendra dans la zone de positionnement d'arrière-plan.
L'attribut background-size peut définir la taille de l'image via la valeur de longueur ou le pourcentage, ou redimensionner l'image via la couverture et le contenu.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 230px;
}
.box1{
background:url(img/3.jpg) no-repeat;
}
.box2{
background:url(img/3.jpg) no-repeat;
background-size: 200px 112px;
}
</style>
</head>
<body>
<p><strong>原始背景图片大小</strong></p>
<div class="box1"></div>
<p>本身这个图片宽度为400px，高度225px</p>
<br />
<p><strong>通过CSS修改背景图片大小，图片宽度为200px，高度112px</strong></p>
<div class="box2"></div>
</body>
</html>Rendu :
(Partage vidéo 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!