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:586625parcourir

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.

Comment faire en sorte que l'image d'arrière-plan ne se répète pas en CSS

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(&#39;2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS&#39;);
    }
    </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.

Comment faire en sorte que limage darrière-plan ne se répète pas en CSS

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(&#39;2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS&#39;);
    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

Comment faire en sorte que limage darrière-plan ne se répète pas en CSS

l'image d'arrière-plan CSS est répétée verticalement

Code CSS

body{
    background: url(&#39;2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS&#39;);
    background-repeat:repeat-y;
}

Exécuter résultats Comme indiqué ci-dessous, les images d'arrière-plan sont répétées verticalement

Comment faire en sorte que limage darrière-plan ne se répète pas en CSS

les images d'arrière-plan CSS ne sont pas répétées

Code CSS

body{
    background: url(&#39;2019062123225Comment faire en sorte que limage darrière-plan ne se répète pas en CSS&#39;);
    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

Comment faire en sorte que limage darrière-plan ne se répète pas en CSS

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!

Déclaration:
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