Maison > Article > interface Web > Définir la taille de l'image d'arrière-plan à l'aide de CSS ?

Définir la taille de l'image d'arrière-plan à l'aide de CSS ?

WBOYavant: 2023-09-08 09:05:021535parcourir

Définir la taille de limage darrière-plan à laide de CSS ?

En utilisant CSS, nous pouvons définir une image d'arrière-plan pour un élément HTML en utilisant la propriété 'background-image'. De plus, après avoir ajouté l’image d’arrière-plan, vous devez définir ses dimensions.

Nous pouvons utiliser la propriété CSS « background-size » pour définir la taille de l'image d'arrière-plan.

Grammaire

Les utilisateurs peuvent utiliser CSS pour définir la taille de l'image d'arrière-plan en suivant la syntaxe ci-dessous.

background-size: width length | width | contain | inherit | cover | initial

Nous pouvons utiliser les valeurs ci-dessus pour définir la taille de l'image d'arrière-plan. Ici, nous avons expliqué toutes les valeurs.

Largeur Longueur - Définissez la largeur et la hauteur de l'image d'arrière-plan. Les utilisateurs peuvent utiliser des pixels, des pourcentages ou des rem pour les valeurs de largeur et de longueur.
Width - Il définit uniquement la largeur de l'image et définit la hauteur "auto".
Contain - Utilisé pour définir l'image d'arrière-plan des éléments HTML sans réduire la taille de l'image d'arrière-plan.
Inherit - Il hérite de la taille de l'image d'arrière-plan de l'image d'arrière-plan de l'élément parent.
Cover - Il définit les dimensions de l'image d'arrière-plan de manière à ce qu'elle puisse s'adapter à l'élément HTML.

Exemple 1

Dans l'exemple ci-dessous, nous avons défini une image d'arrière-plan pour un élément HTML div. Les dimensions de l'élément div sont de 500 X 300. À l’aide de la propriété background-size, nous définissons l’image d’arrière-plan pour qu’elle ait des dimensions de 200 X 200.

Dans la sortie, l'utilisateur peut observer que la taille de l'image d'arrière-plan est plus petite que l'élément div. De plus, nous avons utilisé la propriété CSS « background-repeat : no-repeat » pour éviter les répétitions.

<html>
<head>
   <style>
      .div {
         background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
         background-size: 200px 200px;
         width: 500px;
         height: 300px;
         border: 1px solid blue;
         background-repeat: no-repeat;
      }
   </style>
</head>
<body>
   <h3>Using the background-size CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

Exemple 2

se traduit par :

Exemple 2

Dans l'exemple ci-dessous, nous utilisons la propriété CSS « background-size: cover » pour définir la taille de l'image d'arrière-plan.

Dans la sortie, nous pouvons observer que l'image d'arrière-plan s'inscrit dans l'élément div. Cependant, lorsque nous définissons la taille de l'arrière-plan sur "Cover", certains bords de l'image sont coupés.

<html>
<head>
   <style>
      .div {
         background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
         background-size: cover;
         width: 500px;
         height: 500px;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

La traduction chinoise de

Exemple 3

est :

Exemple 3

Dans l'exemple ci-dessous, nous utilisons la propriété CSS « background-size : contian » pour définir la taille de l'image d'arrière-plan.

Dans le résultat, nous pouvons voir qu'il définit l'image d'arrière-plan sans supprimer les dimensions de l'image.

<html>
<head>
   <style>
      .div {
         background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
         background-size: contain;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Exemple 4

se traduit par :

Exemple 4

Dans l'exemple ci-dessous, nous avons uniquement donné la valeur de largeur de l'attribut 'background-size'. Chaque fois que nous utilisons uniquement une valeur comme propriété « background-size », cela définit la hauteur sur automatique et l'utilisateur peut le voir dans la sortie.

<html>
<head>
   <style>
      .div {
         background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
         background-size: 20rem;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Les utilisateurs ont appris à utiliser CSS pour définir la taille des images d'arrière-plan. Nous pouvons définir une taille personnalisée pour définir l’image d’arrière-plan. De plus, nous pouvons définir la largeur et la hauteur des dimensions de l'arrière-plan sur des valeurs « auto ». Si l'utilisateur souhaite recouvrir l'intégralité de l'élément HTML avec l'arrière-plan, alors "cover" doit être utilisé comme valeur de l'attribut background-size.

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!

css html auto 继承 background

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Créer une animation de bordure en utilisant CSSArticle suivant：Créer une animation de bordure en utilisant CSS

Articles Liés

Voir plus