Quelle propriété est utilisée pour définir l'image d'arrière-plan d'un élément à l'aide de CSS ?-tutoriel CSS-php.cn

Quelle propriété est utilisée pour définir l'image d'arrière-plan d'un élément à l'aide de CSS ?

王林

Libérer： 2023-09-05 10:21:03

avant

1237 Les gens l'ont consulté

哪个属性用于使用 CSS 设置元素的背景图像？

En CSS, la propriété 'background-image' est utilisée pour définir l'image d'arrière-plan d'un élément à l'aide de CSS. La propriété de l’image d’arrière-plan possède 4 propriétés différentes, comme décrit ci-dessous.

Url () - Il faut un chemin d'image ou une URL distante pour obtenir l'image à partir d'un emplacement spécifique et la définir comme arrière-plan.
Aucun - L'utilisateur peut supprimer l'arrière-plan en utilisant aucun comme valeur de la propriété de l'image d'arrière-plan.
Initial - Il définit l'arrière-plan initial, dans la plupart des cas, il n'y a pas d'arrière-plan.
Héritage - Il définit la même image d'arrière-plan que l'élément parent.

Grammaire

Les utilisateurs peuvent utiliser l'attribut "background-image" en CSS selon la syntaxe suivante.

background-image: url('URL');
background-image: inherit;
background-image: initial;
background-image: none;

Copier après la connexion

Comme le montre la syntaxe ci-dessus, nous pouvons utiliser différentes valeurs pour définir l'image d'arrière-plan.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un élément HTML div et spécifié la hauteur et la largeur à l'aide de CSS. De plus, nous avons utilisé la propriété CSS « background-image » pour définir l'arrière-plan de l'élément div.

Dans la sortie, l'utilisateur peut observer que si la taille de l'élément div est supérieure à celle de l'image, il définit l'image d'arrière-plan à plusieurs reprises.

<html>
<head>
   <style>
      .div-ele {
         background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210922/pngtree-abstract-nature-green-and-sunny-defocused-light-background-image_906725.png');
         height: 400px;
         width: 500px;
         font-size: 3rem;
         color: black;
      }
   </style>
</head>
<body>
   <h2>Setting up the background image using the <i> background-image </i> property</h2>
   <div class = "div-ele">
      This is a div.
      This is a div.
      This is a div.
      This is a div.
   </div>
</body>
</html >

Copier après la connexion

Exemple 2

Dans l'exemple ci-dessous, nous utilisons « initial » comme valeur de l'image d'arrière-plan. Dans la sortie, l'utilisateur peut constater qu'il ne définit aucun arrière-plan pour l'élément div car l'arrière-plan initial ne l'est pas.

<html>
<head>
   <style>
      .div-ele {
         background-image: initial;
         height: 300px;
         width: 500px;
         font-size: 2rem;
         color: black;
         border: 2px yellow solid;
      }
   </style>
</head>
<body>
   <h3>Setting up the background image using the <i> background-image </i> property.</h3>
   <div class = "div-ele"> Hi users, how are you? </div>
</body>
</html>

Copier après la connexion

Exemple 3

Dans l'exemple ci-dessous, nous définissons le dégradé avec l'image comme arrière-plan. Dans la sortie, l'utilisateur peut observer que le dégradé s'effectue de haut en bas et que le contenu de l'élément div est au-dessus du dégradé.

<html>
<head>
   <style>
      .div-ele {
         background-image: linear-gradient(rgba(255, 0, 0, 0.6), rgba(0, 0, 255, 0.6)), url('https://www.tutorialspoint.com/css/images/css-mini-logo.jpg');
         height: 300px;
         width: 500px;
         font-size: 4rem;
         color: black;
         border: 2px yellow solid;
      }
   </style>
</head>
<body>
   <h2>Setting up the background image using the <i> background-image </i> property.</h2>
   <div class = "div-ele">
      Welcome to TutorialPoint's website!
   </div>
</body>
</html>

Copier après la connexion

Exemple 4

Dans l'exemple ci-dessous, nous définissons deux images comme arrière-plan d'un élément div. De plus, nous définissons différentes positions d’arrière-plan pour ces deux éléments. Dans la sortie, l’utilisateur peut observer qu’une image est située dans le coin inférieur droit et l’autre image est située dans le coin supérieur gauche.

Chaque fois que nous utilisons deux images d'arrière-plan ensemble, la première image apparaîtra au-dessus de la deuxième image.

<html>
<head>
   <style>
      div {
         background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmvLkYgy28lI-iZWZpd3aAz0mi25dpUNXnU6OUE2V&s"), url("https://media.istockphoto.com/id/1090883040/vector/twinkle-little-star.jpg?s=612x612&w=0&k=20&c=Z5csKM3_ccD2MWqeWn6XfBoCqUeGf1IJHN09hJhCQEM=");
         background-position: right bottom, left top;
         background-repeat: no-repeat, repeat;
         height: 500px;
         width: 500px;
         font-size: 2rem;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Setting up the multiple background images using the <i> background-image </i> property.</h2>
   <div>
      This div contains 2 background images.
      The first one is at the right bottom, and the second one is at the left top position.
   </div>
</body>
</html>

Copier après la connexion

Dans ce tutoriel, l'utilisateur a appris à utiliser la propriété "background-image" pour définir l'arrière-plan d'une image. Les utilisateurs ont également appris à définir des dégradés comme arrière-plans pour les éléments HTML. Les utilisateurs peuvent également utiliser plusieurs images comme arrière-plan, et lorsqu'ils ajoutent l'URL de l'image comme valeur, les images d'arrière-plan apparaîtront également dans le même ordre dans lequel la pile a été créée.

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!