Maison >interface Web >Questions et réponses frontales >CSS définir la taille de l'arrière-plan
CSS est un langage utilisé pour la conception et la mise en page Web qui permet une variété de styles et d'effets, y compris les paramètres de taille d'arrière-plan. La taille d'arrière-plan fait référence à la taille et au mode d'affichage de l'image d'arrière-plan lorsque la page Web est chargée. Définir correctement la taille de l’arrière-plan peut non seulement améliorer la beauté de la page Web, mais également améliorer l’expérience utilisateur. Ensuite, nous expliquerons en détail comment utiliser CSS pour définir la taille de l'arrière-plan.
1. Utilisez l'attribut background-size
L'attribut background-size est utilisé pour définir la taille de l'arrière-plan. Il peut spécifier la taille et le mode d'affichage de l'image d'arrière-plan. Il existe trois valeurs couramment utilisées : cover, contain et px. Plus précisément, ils représentent respectivement :
Ci-dessous, nous utilisons plusieurs exemples pour montrer comment utiliser l'attribut background-size.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('https://picsum.photos/id/100/800/400'); background-size: cover; } </style> </head> <body> <h1>Hello World!</h1> <p>这是一段测试文本。</p> </body> </html>
Dans le code ci-dessus, nous utilisons une image aléatoire fournie par Lorem Picsum comme arrière-plan. En CSS, nous répartissons l'image d'arrière-plan sur toute la zone d'arrière-plan, et l'effet est le suivant :
Vous pouvez voir que la hauteur de l'image a été allongée, mais la largeur a également été entièrement conservée, ce qui rend la tout l'arrière-plan est plus beau.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('https://picsum.photos/id/100/800/400'); background-size: contain; } </style> </head> <body> <h1>Hello World!</h1> <p>这是一段测试文本。</p> </body> </html>
Dans le code ci-dessus, nous utilisons également une image aléatoire comme arrière-plan. En CSS, l'attribut contain est utilisé pour que l'image ne soit pas étirée, mais soit affichée aussi centrée que possible dans la zone d'arrière-plan. L'effet est le suivant :
Comme vous pouvez le voir sur l'effet d'image, bien que l'image ne puisse pas couvrir complètement la zone d'arrière-plan, l'ensemble du design semble plus équilibré.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('https://picsum.photos/id/100/800/400'); background-size: 600px; } </style> </head> <body> <h1>Hello World!</h1> <p>这是一段测试文本。</p> </body> </html>
Dans le code ci-dessus, nous utilisons également une image aléatoire comme arrière-plan. En CSS, un paramètre de valeur fixe de 600 px est utilisé, et l'effet est le suivant :
Vous pouvez voir que puisque la taille de l'image est limitée à 600 px, toute la zone d'arrière-plan reste vide. Par conséquent, lorsque vous utilisez la valeur px pour définir la taille de l'arrière-plan, vous devez l'ajuster en fonction de la situation spécifique pour garantir que la taille de l'image d'arrière-plan peut être coordonnée avec celle de la page entière.
2. Utilisez l'attribut background-position
En plus de l'attribut background-size, nous pouvons également utiliser l'attribut background-position pour définir la position de l'arrière-plan. Cette propriété permet de centrer l'image d'arrière-plan horizontalement ou verticalement dans la zone d'arrière-plan, avec le décalage correspondant. L'utilisation spécifique est la suivante :
<!DOCTYPE html> <html> <head> <style> body { background-image: url('https://picsum.photos/id/100/800/400'); background-size: cover; background-position: center; } </style> </head> <body> <h1>Hello World!</h1> <p>这是一段测试文本。</p> </body> </html>
Dans le code ci-dessus, nous définissons la position centrée, et l'effet est le suivant :
Comme vous pouvez le voir sur les rendus, la position alignée au centre coïncide avec le centre de l'image, et l'effet visuel est très bon.
3. Résumé
Ce qui précède explique comment utiliser CSS pour définir la taille de l'arrière-plan. Dans le développement réel, se concentrer sur l’expérience utilisateur et l’esthétique globale de la page devrait être le plus important. Grâce à de bons paramètres d’arrière-plan, nous pouvons rendre nos pages Web plus attrayantes et obtenir de meilleurs effets de conception.
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!