taille de l'arrière-plan
Définissez la taille de l'image d'arrière-plan, affichée sous forme de valeur de longueur ou de pourcentage. Vous pouvez également redimensionner l'image via la couverture et le contenu.
Explication détaillée de l'utilisation de l'attribut background-size :
L'attribut Background-size a deux paramètres (cover et contain ne sont pas inclus ici) , Le la valeur du paramètre peut être soit une valeur numérique exacte, un pourcentage ou la valeur par défaut auto, par exemple :
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;
Les paramètres suivants pour l'attribut Background-size Laissez-moi donnez une brève introduction :
S'il n'y a qu'un seul paramètre, alors cette valeur est utilisée pour spécifier la largeur de l'image d'arrière-plan. À ce stade, la valeur de hauteur de l'image d'arrière-plan est mise à l'échelle proportionnellement à la largeur.
Si deux paramètres sont fournis, le premier paramètre est utilisé pour spécifier la largeur de l'image d'arrière-plan, et le deuxième paramètre est utilisé pour spécifier la hauteur de l'image d'arrière-plan.
L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px 100px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>L'attribut Background-size prend deux paramètres. Le premier paramètre spécifie la largeur de l'image d'arrière-plan à 200 px, et le deuxième paramètre spécifie la hauteur de l'image d'arrière-plan. comme 100px.
Regardez un autre exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.first{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px;
background-repeat:no-repeat;
}
.second{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:600px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="first"></li>
<li class="second"></li>
</ul>
</body>
</html> Dans le code ci-dessus, l'attribut Background-size spécifie un paramètre, puis ce paramètre est utilisé pour spécifier la largeur de l'image d'arrière-plan et la hauteur de l'arrière-plan. l'image est basée sur la valeur de largeur, etc. Mise à l'échelle proportionnelle, si la taille de l'image d'arrière-plan dépasse le conteneur, elle sera recadrée.
Si la valeur de l'attribut Background-size est auto, l'image d'arrière-plan sera affichée selon sa taille d'origine. Il n'est pas nécessaire de le démontrer ici.
Ce qui suit présente la couverture et contient les valeurs d'attribut de cet attribut.
1. Attribut de couverture :
Après avoir défini la valeur de l'attribut sur couvrir, redimensionnez l'image d'arrière-plan proportionnellement pour couvrir complètement le conteneur. L'image d'arrière-plan peut dépasser le conteneur, mais la partie excédentaire le sera. Couper.
Cover signifie également couvrir en anglais. Dire cela aidera la mémoire et la compréhension de chacun.
L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Dans le code ci-dessus, l'image d'arrière-plan peut recouvrir complètement le conteneur dans une mesure minimale. Si les proportions de l'image d'arrière-plan et du conteneur sont différentes, cela peut être le cas. apparaîtra inévitablement dans le sens horizontal ou vertical. S'il dépasse le conteneur, l'excédent sera caché.
Attribut 1.contain :
Cette valeur d'attribut peut agrandir ou réduire l'image d'arrière-plan.
Semblable à l'attribut cover, l'image peut être agrandie ou réduite dans des proportions égales, mais cover recouvre le conteneur au minimum, tandis que contain nécessite seulement que le conteneur soit couvert dans une certaine direction, comme verticale ou horizontale, ce qui peut minimiser la couverture du conteneur.
L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:contain;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Dans le code ci-dessus, l'image d'arrière-plan est mise à l'échelle proportionnellement. Puisque l'élément du conteneur de remplissage peut être atteint en premier dans le sens vertical, la tentative est abandonnée dans le sens vertical. direction horizontale.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
