L'attribut background-size est utilisé pour définir la taille de l'image d'arrière-plan. Vous pouvez définir la taille de l'image via la valeur de longueur ou le pourcentage, ou utiliser cover et contain pour étirer l'image.
Attribut CSS background-size
Fonction : Spécifie la taille de l'image d'arrière-plan.
Remarque : Avant CSS3, la taille de l'image d'arrière-plan était déterminée par la taille réelle de l'image. En CSS3, la taille de l'image d'arrière-plan peut être spécifiée, ce qui nous permet de réutiliser l'image d'arrière-plan dans différents environnements.
Syntaxe :
background-size: length|percentage|cover|contain;
| Valeur | Description | ||||||||||
| longueur |
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". | ||||||||||
| pourcentage | Définissez la largeur et la hauteur de l'image d'arrière-plan en pourcentage du parent élément. <!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p>
</body>
</html>Copier après la connexion 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". | ||||||||||
| cover | Agrandissez l'image d'arrière-plan pour qu'elle soit suffisamment grande pour qu'elle 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 d'ancrage d'arrière-plan. | ||||||||||
| contenir | Agrandir l'image à sa taille maximale afin que sa largeur et sa hauteur s'intègrent parfaitement dans le contenu zone . |
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
