Maison > Article > interface Web > Comment utiliser l'attribut CSS background-size
Comment utiliser l'attribut CSS background-size
- 藏色散人original
- 2019-05-29 10:47:294341parcourir
L'attribut CSS background-size peut définir la taille de l'image d'arrière-plan. Syntaxe : background-size : length|percentage|cover|contain ; Définissez la taille de l'image via la valeur de longueur ou le pourcentage, ou redimensionnez l'image via la couverture et le contenu.
Comment utiliser l'attribut CSS background-size ?
Fonction : Spécifie la taille de l'image d'arrière-plan.
Syntaxe :
background-size: length|percentage|cover|contain;
Description :
longueur 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 définie, la deuxième valeur sera définie sur « auto ». pourcentage définit la largeur et la hauteur de l’image d’arrière-plan en pourcentage de l’élément parent.
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 Agrandit 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. contain Agrandit l'image à sa taille maximale afin que sa largeur et sa hauteur tiennent entièrement dans la zone de contenu.
Remarque : IE9+, Firefox 4+, Opera, Chrome et Safari 5+ prennent en charge l'attribut background-size.
Exemple d'utilisation de l'attribut CSS background-size
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>Sortie d'effet :
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!