Maison > Article > interface Web > Comment faire en sorte que l'image d'arrière-plan ne se répète pas en CSS
Comment faire en sorte que l'image d'arrière-plan ne se répète pas en CSS
- 青灯夜游original
- 2020-12-23 11:28:586627parcourir
En CSS, vous pouvez utiliser l'attribut background-repeat pour empêcher la répétition de l'image d'arrière-plan. Cet attribut peut définir si et comment l'image d'arrière-plan est répétée ; il suffit de définir "background-repeat:no-repeat;" à l’image d’arrière-plan. » pour empêcher l’image d’arrière-plan de se répéter.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Recommandé : Tutoriel vidéo CSS
Image d'arrière-plan de configuration CSS
En CSS, nous vous peut utiliser l'attribut background pour définir l'image d'arrière-plan, comme le code suivant
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示背景图片</title>
<style>
body{
background: url('2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS');
}
</style>
</head>
<!--飞鸟慕鱼博客-->
<body>
</body>
</html>Lorsque nous exécutons le code, nous constatons que l'image d'arrière-plan est répétée horizontalement ou verticalement jusqu'à ce qu'elle couvre toute la zone d'affichage.
Attribut CSS background-repeat
Il existe un attribut background-repeat en CSS qui peut définir images Indique si et comment l'image d'arrière-plan est répétée. Sa valeur par défaut est de répéter à la fois horizontalement et verticalement. Si la valeur de cette propriété n'est pas définie, l'image d'arrière-plan sera répétée horizontalement et verticalement comme l'exemple de code ci-dessus, couvrant l'intégralité. objet.
Il a trois valeurs qui peuvent être définies, comme suit, parmi lesquelles la valeur de répétition est la valeur par défaut.
répéter : par défaut. L'image d'arrière-plan se répétera verticalement et horizontalement.
repeat-x : L'image d'arrière-plan se répétera horizontalement.
répéter-y : L'image d'arrière-plan se répétera verticalement.
no-repeat : L'image de fond ne sera affichée qu'une seule fois.
inherit : Spécifie que le paramètre de l'attribut background-repeat doit être hérité de l'élément parent.
l'image d'arrière-plan CSS se répète uniquement horizontalement (horizontalement)
Code CSS :
body{
background: url('2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS');
background-repeat:repeat-x;
}Le résultat de l'exécution est le suivant , arrière-plan Les images sont répétées horizontalement
l'image d'arrière-plan CSS est répétée verticalement
Code CSS
body{
background: url('2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS');
background-repeat:repeat-y;
}Exécuter résultats Comme indiqué ci-dessous, les images d'arrière-plan sont répétées verticalement
les images d'arrière-plan CSS ne sont pas répétées
Code CSS
body{
background: url('2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS');
background-repeat:no-repeat;
} Le résultat de l'exécution est celui indiqué ci-dessous. L'image d'arrière-plan ne sera pas répétée horizontalement ou verticalement. Une seule image sera affichée
Pour plus de connaissances liées à la programmation, veuillez visiter : Tutoriel de programmation ! !
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!