Comment définir la couleur et l'image d'arrière-plan à l'aide de CSS-tutoriel CSS-php.cn

Comment définir la couleur et l'image d'arrière-plan à l'aide de CSS

不言

Libérer： 2021-04-21 17:19:29

original

7181 Les gens l'ont consulté

Comment définir la couleur et l'image d'arrière-plan avec CSS : 1. Définissez la couleur d'arrière-plan via l'attribut background-color ; 2. Définissez l'image d'arrière-plan via l'attribut background-image.

Comment définir la couleur et l'image d'arrière-plan à l'aide de CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Pour utiliser CSS pour définir l'arrière-plan, nous devons utiliser l'attribut background background. Grâce à l'attribut background, nous pouvons définir la couleur d'arrière-plan et l'image d'arrière-plan. avec CSS.

Jetons un coup d'oeil d'abordDéfinition CSS de la couleur d'arrière-plan

Nous devons utiliser background-color pour changer la couleur d'arrière-plan

background-color:value（颜色编码或者颜色名称）

Copier après la connexion

Dans Dans la partie valeur, vous pouvez saisir un code de couleur tel que #000000 ou un nom de couleur tel que blanc, et la couleur définie sera la couleur d'arrière-plan.

La valeur initiale de background-color est transparente, auquel cas la couleur d'arrière-plan de l'élément parent sera appliquée. S'il n'y a aucun paramètre dans l'élément parent, il deviendra blanc.

Définition CSS de l'arrière-plan de l'image

En utilisant l'attribut background-image, nous pouvons prédéfinir l'image téléchargée sur le serveur comme arrière-plan.

background-image: url("图像的路径");

Copier après la connexion

Dans l'url, entrez le chemin d'accès au fichier image que vous souhaitez utiliser comme arrière-plan. Si le fichier CSS et le fichier image se trouvent dans le même répertoire, seul le nom du fichier conviendra.

Les chemins absolus et relatifs peuvent être utilisés comme chemins d'accès aux fichiers image.

Pour saisir un chemin relatif, saisissez le chemin relatif vers la feuille de style externe, et non le chemin relatif vers le fichier html.

Regardons ensuite un exemple spécifique

Utilisez background-color pour définir la couleur d'arrière-plan

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-color: skyblue;
    }
  </style>
</head>
<body>
<p>Comment définir la couleur et limage darrière-plan à laide de CSS设置</p>
</body>
</html>

Copier après la connexion

Le résultat de l'exécution

affiche l'effet suivant sur le navigateur. La couleur bleu ciel spécifiée est définie comme couleur d'arrière-plan

Comment définir la couleur et limage darrière-plan à laide de CSS

Utilisez le paramètre d'image d'arrière-plan L'image d'arrière-plan

le code est le suivant

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-image: url("img/t.jpg");
    }
  </style>
</head>
<body>
<p>Comment définir la couleur et limage darrière-plan à laide de CSS设置</p>
</body>
</html>

Copier après la connexion

L'effet de course est illustré dans la figure ci-dessous

Comment définir la couleur et limage darrière-plan à laide de CSS

Lorsque la taille de l'écran est plus grande que l'image d'arrière-plan, la situation par défaut L'image d'arrière-plan est automatiquement répétée ci-dessous. Ce paramètre peut être modifié à l'aide de l'attribut background-repeat.

L'affichage de l'image d'arrière-plan commence dans le coin supérieur gauche du paramètre initial. Ce paramètre peut être modifié à l'aide de la propriété background-position

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!