Maison > Article > interface Web > Comment obtenir un effet de répétition d'image d'arrière-plan avec CSS
Comment obtenir l'effet de répétition de l'image d'arrière-plan avec CSS : créez d'abord un exemple de fichier HTML et entrez le code de base ; puis implémentez-le via "background-image: url(img/154e.png); background- répéter: répéter;" attribut L'image d'arrière-plan répète l'effet.
L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, version HTML5&&CSS3.
Effet de répétition de l'image de fond, je pense que tout le monde l'a vu sur les principaux sites Web. Un bel effet de répétition d'image d'arrière-plan peut rendre notre page Web plus belle et plus riche en contenu. Nous pouvons obtenir cet effet grâce aux propriétés liées à l'arrière-plan en CSS.
Ci-dessous, nous utiliserons un exemple de code simple pour vous présenter l'effet de la répétition des images d'arrière-plan en utilisant CSS.
L'exemple de code est le suivant :
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
body{
background-image: url(img/154e.png);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>L'image unique que nous utilisons ici est la suivante :
Ensuite, l'image d'arrière-plan est répétée. L'effet final est le suivant (capture d'écran partielle) :
Introduction aux attributs associés :
attribut background-imageL'image d'arrière-plan peut être définie pour les éléments. L'arrière-plan d'un élément occupe toute la taille de l'élément, y compris le remplissage et les bordures, mais pas les marges.
attribut background-repeat Définissez si et comment répéter l'image d'arrière-plan.
Remarque : Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.
Référence recommandée : "Tutoriel CSS"
Cet article concerne l'introduction du CSS pour obtenir l'effet de répétition de l'image d'arrière-plan. J'espère également qu'il est très simple. cela sera utile aux amis qui en ont besoin.
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!