Nous savons qu'il existe un attribut très important en CSS3, l'attribut bachground-size. Sa fonction est de définir la taille de l'image de fond. Il y a 5 valeurs, auto, valeur en pixels, pourcentage, couverture et contenu. Aujourd'hui, je vais vous apprendre à utiliser l'attribut bachground-size.
background-size:auto, la valeur par défaut, remplit l'élément avec la taille de l'image elle-même, ajuste sa propre proportion en fonction de la taille de l'élément et ne déforme pas l'image.
CSS3 à propos de l'attribut background-size
1.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>2 La taille de l'image d'arrière-plan elle-même : largeur : 200 px, hauteur : 133 px. du code ci-dessus est le suivant :
les valeurs de pixels, telles que 30px 50px, représentent respectivement la largeur et la hauteur
CSS3 concernant l'attribut background-size
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>Croyez-le ou non Après avoir lu ces cas, vous maîtrisez les méthodes. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture connexe :
Tutoriel sur l'utilisation de l'attribut transform en Css3
Introduction détaillée à l'attribut border-image dans Css3
Plusieurs façons de se positionner dans les projets front-end
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!
tutoriel CSS3
Quelles sont les propriétés du dégradé CSS3 ?
L'installation de l'imprimante a échoué
Comment afficher les procédures stockées dans MySQL
orientéb
exigences de configuration matérielle du serveur Web
Comment configurer au mieux la mémoire virtuelle
Solution à l'échec du téléchargement de Win10
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
