Comment utiliser l'attribut CSS background-size-Questions et réponses frontales-php.cn

Comment utiliser l'attribut CSS background-size

藏色散人

Libérer： 2019-05-29 10:47:29

original

4524 Les gens l'ont consulté

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

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;

Copier après la connexion

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(&#39;https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg&#39;);
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>

Copier après la connexion

Sortie d'effet :

Comment utiliser lattribut CSS background-size