Maison > Article > interface Web > Comment définir le mode de mosaïque d'images en CSS
Comment définir le mode de mosaïque d'images en CSS
- 青灯夜游original
- 2021-11-10 17:17:2216989parcourir
En CSS, vous pouvez utiliser l'attribut background-repeat pour définir la méthode de mosaïque de l'image. Lorsque la valeur est "repeat", l'arrière-plan peut être complètement carrelé. Lorsqu'il est "repeat-x", il peut être carrelé horizontalement. Lorsqu'il est « répétition » peut être carrelé verticalement, « no-repeat » ne sera pas carrelé (l'image ne sera affichée qu'une seule fois).
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser l'attribut background-repeat pour définir la méthode de mosaïque d'images.
L'attribut background-repeat définit le mode de mosaïque de l'image et définit si et comment répéter l'image d'arrière-plan.
L'attribut background-repeat peut définir quatre modes de mosaïque :
1 Lorsque la valeur est "repeat", l'arrière-plan peut être complètement carrelé
repeat : Par défaut. L'image d'arrière-plan se répétera verticalement et horizontalement.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:repeat;
}
</style>
</head>
<body>
<div ></div>
</body>
</html>
2. Lorsque la valeur est "repeat-x", elle peut être carrelée horizontalement.
repeat-x : Seule la position horizontale répétera l'image d'arrière-plan. la valeur est "repeat-y", elle peut être carrelée horizontalement. Mosaïque verticale
repeat-y : Seule la position verticale répétera l'image d'arrière-plan 
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:repeat-x;
}
4. ne sera pas carrelé
no-repeat : L'image d'arrière-plan ne sera affichée qu'une seule fois
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:repeat-y;
}
(Partage vidéo d'apprentissage :
Tutoriel vidéo CSS)
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!