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

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

WBOY

Libérer： 2023-09-08 09:05:02

avant

1538 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!