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-tutoriel CSS-php.cn

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

不言

Libérer： 2018-10-08 14:11:16

original

34957 Les gens l'ont consulté

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>

Copier après la connexion

L'effet de carrelage d'image d'arrière-plan CSS est le suivant :

Comment rendre limage darrière-plan carrelable avec CSS ? Introduction à quatre façons de mosaïquer des images darrière-plan CSS

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>

Copier après la connexion

arrière-plan CSS dans L'effet de non carrelé dans les directions des axes X et Y est le suivant :

Comment rendre limage darrière-plan carrelable avec CSS ? Introduction à quatre façons de mosaïquer des images darrière-plan CSS

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>

Copier après la connexion

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 Comment rendre limage darrière-plan carrelable avec CSS ? Introduction à quatre façons de mosaïquer des images darrière-plan CSS

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>

Copier après la connexion

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!