Comment utiliser l'attribut background-repeat-tutoriel CSS-php.cn

Comment utiliser l'attribut background-repeat

青灯夜游

Libérer： 2019-02-18 14:32:32

original

10514 Les gens l'ont consulté

La propriété background-repeat de CSS est utilisée pour définir la façon dont l'image d'arrière-plan est carrelée. background-repeat:repeat-x signifie que seule la position horizontale répétera l'image d'arrière-plan ; background-repeat:repeat-y signifie que seule la position verticale répétera l'image d'arrière-plan.

Comment utiliser l'attribut background-repeat

Propriété CSS background-repeat

Fonction : Définissez si et comment répéter l'image d'arrière-plan.

Syntaxe de base :

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat : valeur par défaut, l'image de fond sera verticale et répétez horizontalement.

repeat-x : Seule l'image d'arrière-plan sera répétée horizontalement.

répéter-y : seules les positions verticales répéteront l'image d'arrière-plan.

no-repeat : L'image d'arrière-plan ne sera pas répétée.

Description : L'attribut background-repeat définit le mode de mosaïque de l'image. Répétez à partir de l’image originale, qui est définie par background-image et placée en fonction de la valeur de background-position.

Exemple d'utilisation de l'attribut CSS background-repeat

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.demo1{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat;
}
.demo2{
	width: 400px;
	height: 100px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:no-repeat;
}
.demo3{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-x;
}
.demo4{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-y;
}
</style>
</head>

<body>
<h3>repeat设置背景图片向垂直和水平方向重复</h3>
<div class="demo1"></div>
<h3>no-repeat设置背景图片不重复</h3>
<div class="demo2"></div>
<h3>repeat-x设置背景图片向水平方向重复</h3>
<div class="demo3"></div>
<h3>repeat-y设置背景图片向垂直方向重复</h3>
<div class="demo4"></div>
</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser lattribut background-repeat