Comment utiliser CSS pour définir si l'image d'arrière-plan est répétée ou non

醉折花枝作酒筹
Libérer: 2021-08-13 14:30:39
original
2677 Les gens l'ont consulté

Dans l'article précédent, nous avons découvert la méthode de positionnement de l'image d'arrière-plan des éléments. Veuillez consulter "Obtenir l'image d'arrière-plan des éléments de positionnement CSS en une seule astuce". Cette fois, nous apprendrons comment configurer l'image d'arrière-plan pour qu'elle se répète. Vous pouvez vous y référer si nécessaire.

Lorsque nous avons une image d'arrière-plan, comment définir la méthode de mosaïque de cette image d'arrière-plan ?

Regardons d'abord un petit marron, reprenons le code de l'article précédent.

 

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

为了显示,表明这个一个p元素

Copier après la connexion

Le résultat est

Comment utiliser CSS pour définir si limage darrière-plan est répétée ou non

Nous pouvons voir que l'image d'arrière-plan dans ce petit exemple a toujours été celle-ci, mais le nombre de fois que l'image apparaît a changé. Quelle en est la raison ? Comme vous pouvez le constater, nous avons modifié la valeur de l'attribut background-repeat. Aujourd'hui, nous allons parler de cet attribut. La propriété

background-repeatdéfinit si et comment répéter l'image d'arrière-plan. L'image d'arrière-plan peut se répéter le long de l'axe horizontal, de l'axe vertical, des deux axes, ou pas du tout. Par défaut, l'image d'arrière-plan se répète horizontalement et verticalement. Les images répétitives sont découpées à la taille de l'élément, mais elles peuvent être mises à l'échelle (en utilisantround) ou uniformément espacées (en utilisantespace).background-repeat属性设置是否及如何重复背景图像。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。默认地,背景图像在水平和垂直方向上重复。重复的图像被剪裁为元素的大小,但它们可以缩放 (使用round) 或者均匀地分布 (使用space)。

该属性从原图像开始重复,原图像由background-image定义,并根据background-position的值放置。

在这个属性中一共有四个属性值,分别是repeatrepeat-xrepeat-yno-repeat

Cet attribut répète l'image originale, qui est définie par background-imageet placée en fonction de la valeur de background-position.

Il y a quatre valeurs d'attribut dans cet attribut, à savoirrepeat,repeat-x,repeat-yetno - répéter. Parmi eux, répéter signifie que l'image d'arrière-plan se répétera dans les directions verticale et horizontale ; répéter-x signifie que l'image d'arrière-plan se répétera dans la direction horizontale ; répéter-y signifie que l'image d'arrière-plan se répétera dans la direction verticale ; répéter signifie que l’image d’arrière-plan ne se répétera pas et n’apparaîtra qu’une seule fois.

Apprentissage recommandé : 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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!