Propriétés d'arrière-plan CSS : la magie de background-image et background-color

Propriétés d'arrière-plan CSS : la merveilleuse utilisation de l'image d'arrière-plan et de la couleur d'arrière-plan

L'arrière-plan est une partie très importante de la conception Web. Vous pouvez améliorer l'effet visuel de la page et améliorer l'expérience utilisateur en définissant l'image d'arrière-plan. et la couleur. En CSS, nous pouvons utiliser la propriété background-image pour définir l'image d'arrière-plan et la propriété background-color pour définir la couleur d'arrière-plan. Cet article explique l'utilisation spécifique de ces deux propriétés et fournit quelques exemples de code.

1. Utilisation de l'attribut background-image

L'attribut background-image est utilisé pour définir l'image d'arrière-plan d'un élément. Les images peuvent être référencées à l'aide d'URL absolues, d'URL relatives ou via un encodage base64. Voici un exemple de définition d'une image d'arrière-plan :

/* 使用绝对网址引用图像 */
body {
  background-image: url("https://example.com/image.jpg");
}

/* 使用相对网址引用图像 */
div {
  background-image: url("../images/image.jpg");
}

En plus de simplement définir une image d'arrière-plan, l'attribut background-image fournit également d'autres utilisations :

1. Définir plusieurs images d'arrière-plan :

div {
  background-image: url("image1.jpg"), url("image2.jpg");
}

2. Spécifiez l'arrière-plan image Méthode de répétition :

div {
  background-image: url("image.jpg");
  background-repeat: repeat-x; /* 水平重复 */
  background-repeat: repeat-y; /* 垂直重复 */
  background-repeat: no-repeat; /* 不重复 */
}

3. Définissez la méthode de positionnement de l'image d'arrière-plan :

div {
  background-image: url("image.jpg");
  background-position: top left; /* 左上 */
  background-position: center bottom; /* 中下 */
  background-position: right center; /* 右中 */
}

2. Utilisation de l'attribut background-color

L'attribut background-color est utilisé pour définir la couleur d'arrière-plan de l'élément. Les couleurs peuvent être spécifiées à l'aide de noms de couleurs, de valeurs hexadécimales ou de valeurs RVB. Voici un exemple de définition de la couleur d'arrière-plan :

body {
  background-color: red; /* 使用颜色名称 */
}

div {
  background-color: #00ff00; /* 使用十六进制值 */
}

span {
  background-color: rgb(0, 0, 255); /* 使用 RGB 值 */
}

Semblable à l'attribut background-image, l'attribut background-color fournit également d'autres utilisations :

1. Définissez la transparence de la couleur d'arrière-plan :

div {
  background-color: rgba(255, 0, 0, 0.5); /* 背景颜色为红色，透明度为 50% */
}

2. Définissez la dégradé de couleurs :

div {
  background-color: linear-gradient(red, blue); /* 从红色到蓝色的渐变 */
}

3. Utiliser plusieurs couleurs d'arrière-plan :

div {
  background-color: red, blue; /* 先显示红色，然后显示蓝色 */
}

Pour résumer, les propriétés background-image et background-color de CSS jouent un rôle très important dans la conception Web. En définissant de manière flexible les images et les couleurs d'arrière-plan, nous pouvons ajouter des effets visuels plus riches aux pages Web et améliorer l'expérience utilisateur. J'espère que cet article pourra vous aider à mieux comprendre et utiliser ces deux propriétés.

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!