Maison > Article > interface Web > Comment rendre l'image d'arrière-plan carrelable avec CSS ? Introduction à quatre façons de mosaïquer des images d'arrière-plan CSS
Comment rendre l'image d'arrière-plan carrelable avec CSS ? Introduction à quatre façons de mosaïquer des images d'arrière-plan CSS
- 不言original
- 2018-10-08 14:11:1634869parcourir
Dans le processus de conception Web, il peut parfois être nécessaire de mosaïquer l'image d'arrière-plan, car cela améliorera l'apparence de la page Web entière. La mosaïque de l'image peut être effectuée directement sans définir la largeur et la hauteur du corps de la page entière. alors comment créer la vignette de l'image d'arrière-plan ? Ensuite, cet article vous expliquera comment créer la vignette d'image d'arrière-plan avec CSS. Les amis dans le besoin peuvent s'y référer.
Voyons d'abord comment définir la mosaïque de l'image d'arrière-plan à l'aide de CSS.
répéter : le mode par défaut, mosaïque complètement l'arrière-plan
no-repeat : ne pas mosaïquer dans les directions des axes X et Y
répéter-x ; : Mosaïque l'arrière-plan horizontalement ;
répéter : Mosaïque l'arrière-plan verticalement.
Jetons un coup d'œil au code d'implémentation de ces quatre vignettes d'image d'arrière-plan en CSS.
Code de carrelage d'image d'arrière-plan CSS pour un arrière-plan entièrement carrelé :
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>L'effet de carrelage d'image d'arrière-plan CSS est le suivant :
L'image d'arrière-plan CSS n'est pas carrelée dans les directions des axes X et Y :
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>arrière-plan CSS dans L'effet de non carrelé dans les directions des axes X et Y est le suivant :
Arrière-plan carrelé horizontalement de la tuile d'image d'arrière-plan CSS :
L'image d'arrière-plan est désormais uniquement en mosaïque horizontale sur le 🎜>
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-x;
}
</style>
<div id="content">
</div>
</body>
</html>Image d'arrière-plan CSS en mosaïque d'arrière-plan en mosaïque verticale :
L'image d'arrière-plan est désormais uniquement carrelé dans l'axe Y, c'est-à-dire horizontalement. Il n'y a pas de carrelage 
L'effet de fond de carrelage vertical CSS est le suivant :
<.><html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-y;
}
</style>
<div id="content">
</div>
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article. Pour un contenu plus passionnant, vous pouvez prêter attention au site Web chinois php.
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!