l'arrière-plan HTML ne se répète pas

Comment rendre l'arrière-plan HTML non répétitif ?

HTML (Hypertext Markup Language) est le langage le plus basique du développement Web. Il contrôle la structure et le contenu des pages Web via un langage de balisage. Dans le développement Web, la conception d’arrière-plan est très importante, elle peut apporter un plaisir visuel aux utilisateurs et rendre le site Web plus attrayant. Cependant, nous constatons parfois que l'arrière-plan de la page Web est répété, ce qui est très préjudiciable à l'expérience visuelle. Alors, comment empêcher la répétition de l’arrière-plan HTML ? Cet article vous apportera des réponses détaillées.

1. Utilisez l'attribut background-repeat

Lorsque la taille de l'image d'arrière-plan n'est pas suffisante, une répétition se produit souvent. À ce stade, nous pouvons contrôler la façon dont l'image d'arrière-plan se répète en définissant l'attribut background-repeat. L'attribut background-repeat a quatre valeurs d'attribut :

(1) répéter : valeur par défaut, l'image d'arrière-plan se répétera horizontalement et verticalement ;
(2) répéter-x : l'image d'arrière-plan se répétera uniquement horizontalement et verticalement. répéter ;
(3) répéter-y : l'image d'arrière-plan se répète uniquement dans le sens vertical et ne se répète pas dans le sens horizontal ;
(4) no-repeat : l'image d'arrière-plan ne se répète pas du tout ;

En définissant la valeur de l'attribut background-repeat sur no-repeat, vous pouvez empêcher l'arrière-plan HTML de se répéter.

html {
background-image:url("background.jpg");
background-repeat:no-repeat;
}

2. Utilisez l'attribut background-size

Si l'image est trop petite, mais nous je n'en veux pas L'image d'arrière-plan est étirée et déformée, mais si vous souhaitez qu'elle soit centrée et remplisse tout l'écran, nous pouvons utiliser l'attribut background-size. L'attribut background-size a deux valeurs facultatives :

(1) cover : L'image d'arrière-plan est mise à l'échelle proportionnellement pour garantir que l'image couvre complètement l'ensemble du conteneur, mais une partie de l'image peut être recadrée.
(2) contain : l'image d'arrière-plan est mise à l'échelle proportionnellement pour garantir que l'image est complètement affichée à l'intérieur du conteneur.

html {
background-image:url("background.jpg");
background-size:cover;
background-repeat:no-repeat;
}

3. Utilisez l'attribut background-attachment

Si le L'image d'arrière-plan est grande et nous voulons que l'utilisateur puisse la voir à tout moment lorsqu'il fait défiler la page, nous pouvons alors utiliser l'attribut background-attachment. L'attribut background-attachment a deux valeurs :

(1) scroll : valeur par défaut, l'image d'arrière-plan se déplacera avec le contenu lors du défilement ;
(2) fixe : l'image d'arrière-plan ne bouge pas avec le défilement ;

html {
background-image:url("background.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}

Résumé

Jusqu'à présent, nous avons introduit trois types de méthode pour rendre l'arrière-plan HTML non répétitif. Bien entendu, nous pouvons également utiliser d’autres méthodes pour obtenir des arrière-plans non répétitifs. Par exemple, utilisez la propriété CSS3 background-clip pour positionner l'image d'arrière-plan dans un coin du conteneur afin qu'elle remplisse tout le conteneur sans duplication. En bref, quelle que soit la méthode utilisée, nous pouvons rendre nos pages Web plus belles et plus professionnelles, et offrir une meilleure expérience aux utilisateurs.

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!