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-04-21 15:29:4422634parcourir
En CSS, vous pouvez utiliser l'attribut background-size pour définir la taille de l'image d'arrière-plan. Cet attribut peut spécifier la taille de l'image d'arrière-plan. Le format de syntaxe est "background-size : valeur numérique avec longueur. unité | valeur en pourcentage | couverture | contient ;".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser l'attribut background-size pour définir la taille de l'image d'arrière-plan ; elle peut être affichée par valeur de longueur ou en pourcentage, et vous pouvez également redimensionner l'image via la couverture et contenir .
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ background-size:cover;/* 将背景图片等比缩放填满整个容器 */ background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
Valeur de l'attribut :
| Valeur | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| longueur |
|
||||||||||
| pourcentage |
Définit la largeur et la hauteur de l'image d'arrière-plan en pourcentage de l'image parent. élément. Si une seule valeur est définie, la deuxième valeur sera définie sur "auto". |
||||||||||
| couverture | Agrandissez l'image d'arrière-plan suffisamment grande pour que l'image d'arrière-plan recouvre complètement la zone d'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. | ||||||||||
| contenir | Agrandit l'image à sa taille maximale afin que sa largeur et sa hauteur s'adaptent entièrement à la zone de contenu. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/5.jpg);
background-size: 100px 100px;
-moz-background-size: 100px 100px;
/* 老版本的 Firefox */
background-repeat: no-repeat;
padding-top: 80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<br />
<img src="img/5.jpg" alt="Flowers"></p>
</body>
</html>Rendu : ( 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!