Maison > Article > interface Web > Comment faire en sorte que l'image d'arrière-plan ne se répète pas en CSS
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!