css comment définir l'image d'arrière-plan pour l'élément-Questions et réponses frontales-php.cn

css comment définir l'image d'arrière-plan pour l'élément

醉折花枝作酒筹

Libérer： 2021-08-13 10:45:02

original

2201 Les gens l'ont consulté

Dans l'article précédent, nous avons découvert la méthode de spécification de la zone de dessin d'arrière-plan, veuillez consulter "Utiliser habilement CSS pour spécifier la zone de dessin d'arrière-plan". Cette fois, nous allons apprendre comment définir une image de fond pour un élément. Vous pouvez vous y référer si nécessaire.

Lorsque nous voulons utiliser une image comme arrière-plan d'un élément, comment devons-nous procéder ?

Regardons un petit exemple.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-image: url("images/2.jpg");
      background-repeat:no-repeat;
    }
  </style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>

Copier après la connexion

Le résultat de ce petit exemple est

css comment définir limage darrière-plan pour lélément

Vous pouvez voir que l'image que nous aimons devient l'arrière-plan de l'élément. C'est parce que nous utilisons l'attribut background-image. background-image这个属性。

我们来看看这个属性吧。

background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

温馨提示：

请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip 和 background-origin

Jetons un coup d'oeil à cette propriété.

L'attribut background-image définit l'image d'arrière-plan de l'élément. L'arrière-plan d'un élément occupe toute la taille de l'élément, y compris le remplissage et les bordures, mais pas les marges. Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement. Conseils :

🎜🎜 Veuillez définir une couleur d'arrière-plan disponible, de sorte que si l'image d'arrière-plan n'est pas disponible, la page puisse toujours obtenir de bons effets visuels. 🎜🎜Lors du dessin, les images sont empilées dans la direction z. L'image spécifiée en premier sera dessinée au-dessus de l'image spécifiée ultérieurement. Ainsi, la première image spécifiée est « la plus proche de l’utilisateur ». 🎜🎜Ensuite, la bordure de l'élément sera dessinée au-dessus d'eux et background-color sera dessinée en dessous d'eux. La relation entre le dessin de l'image, la boîte et la bordure de la boîte doit être définie dans les propriétés CSS background-clip et background-origin. 🎜🎜Si une image spécifiée ne peut pas être dessinée (par exemple, le fichier représenté par l'URI spécifié ne peut pas être chargé), le navigateur traitera cette situation comme si sa valeur était définie sur aucun. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS🎜🎜

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!