Comment configurer l'image pour qu'elle ne s'étire pas à plusieurs reprises en CSS

En CSS, vous pouvez définir que l'image ne s'étire pas de manière répétée en définissant la valeur de l'attribut background-repeat sur "no-repeat". L'attribut background-repeat peut définir si et comment l'image d'arrière-plan est répétée. Lorsque la valeur est "no-repeat", l'étirement sans répétition est défini.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, nous pouvons utiliser la propriété background pour définir l'image d'arrière-plan.

background: url("1.jpg");

Mais par défaut, l'image d'arrière-plan se répète horizontalement et verticalement.

Alors, comment empêcher l'image d'arrière-plan de se répéter ? Vous pouvez utiliser l'attribut background-repeat.

L'attribut background-repeat peut définir si et comment l'image d'arrière-plan est répétée. Sa valeur par défaut est de se répéter horizontalement et verticalement.

Lorsque la valeur de l'attribut background-repeat est définie sur no-repeat, l'image d'arrière-plan ne sera affichée qu'une seule fois, c'est-à-dire que l'image d'arrière-plan ne sera pas étirée à plusieurs reprises.

body{
    background: url("img/1.jpg");
    background-repeat:no-repeat;
}

Supplémentaire : la valeur de l'attribut background-repeat

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

(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!