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 :
- couverture : Faites en sorte que l'image d'arrière-plan couvre toujours toute la zone d'arrière-plan, mais si l'image est plus petite que la zone d'arrière-plan, l'image sera automatiquement étirée ou agrandie afin qu'elle couvre toute la zone d'arrière-plan.
- contenir : Faites en sorte que l'image d'arrière-plan apparaisse centrée dans la zone d'arrière-plan autant que possible sans s'étirer, tout en conservant sa taille d'origine.
- px : spécifiez directement la taille de l'image d'arrière-plan, qui peut être une valeur fixe, un pourcentage ou le mot-clé auto, où auto représente la taille d'origine.
Ci-dessous, nous utilisons plusieurs exemples pour montrer comment utiliser l'attribut background-size.
- cover
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
}
</style>
</head>
<body>
<h1 id="Hello-World">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.
- contain
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: contain;
}
</style>
</head>
<body>
<h1 id="Hello-World">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é.
- px
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: 600px;
}
</style>
</head>
<body>
<h1 id="Hello-World">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 id="Hello-World">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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1369
52
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
