Maison > Article > interface Web > CSS définir la taille de l'arrière-plan

CSS définir la taille de l'arrière-plan

王林original: 2023-05-21 12:10:077155parcourir

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

CSS définir la taille de larrière-plan

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

CSS définir la taille de larrière-plan

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 :

CSS définir la taille de larrière-plan

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 :

CSS définir la taille de larrière-plan

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!

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

Article précédent：évasion CSSArticle suivant：évasion CSS

Articles Liés

Voir plus