Maison > Article > interface Web > Comment définir la taille de l'image d'arrière-plan en CSS
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. 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". |
||||||||||
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!