Maison > Article > interface Web > Comment définir l'arrière-plan en HTML

Comment définir l'arrière-plan en HTML

PHPzoriginal: 2023-04-21 11:27:494735parcourir

Dans la conception de sites Web, l'arrière-plan est l'un des éléments très importants. En modifiant l'arrière-plan, vous pouvez rendre la page Web plus belle et améliorer l'expérience utilisateur. Cet article explique comment définir l'arrière-plan en HTML.

Les méthodes suivantes peuvent être utilisées pour définir l'arrière-plan en HTML :

Utiliser des attributs pour définir la couleur d'arrière-plan
En HTML, vous pouvez utiliser l'attribut background-color pour définir la couleur d'arrière-plan. En CSS, vous pouvez utiliser des sélecteurs pour définir différentes couleurs d'arrière-plan pour différentes parties de la page Web.

L'exemple suivant montre comment définir la couleur d'arrière-plan de l'élément body d'une page Web :

<!DOCTYPE html>
<html>
  <head>
    <title>设置背景颜色示例</title>
    <style>
      body {
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>

Dans l'exemple ci-dessus, la couleur d'arrière-plan de l'élément body est définie sur #f0f0f0, qui est gris clair.

Définir l'image d'arrière-plan à l'aide d'attributs
En plus de définir la couleur d'arrière-plan, vous pouvez également définir une image d'arrière-plan en HTML à l'aide de l'attribut background-image.

L'exemple suivant montre comment définir une image d'arrière-plan pour l'élément body d'une page Web :

<!DOCTYPE html>
<html>
  <head>
    <title>设置背景图片示例</title>
    <style>
      body {
        background-image: url("bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>

Dans l'exemple ci-dessus, l'image d'arrière-plan de l'élément body est définie sur l'image bg.jpg, et l'image d'arrière-plan- L'attribut repeat est utilisé pour spécifier de ne pas afficher l'image d'arrière-plan à plusieurs reprises. Dans le même temps, l'attribut background-size définit la taille de l'image d'arrière-plan pour l'adapter à la taille de la fenêtre.

Utilisez des attributs pour définir la position de l'arrière-plan
Dans une page Web, vous pouvez utiliser l'attribut background-position pour définir la position de l'image d'arrière-plan.

L'exemple suivant montre comment définir l'image d'arrière-plan et la position de l'élément body d'une page Web :

<!DOCTYPE html>
<html>
  <head>
    <title>设置背景图片和位置示例</title>
    <style>
      body {
        background-image: url("bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>

Dans l'exemple ci-dessus, l'image d'arrière-plan de l'élément body est définie sur l'image bg.jpg, et l'image d'arrière-plan de l'élément body est définie sur l'image bg.jpg. l'image d'arrière-plan est définie via l'attribut background-position Affiché au centre.

Pour résumer, il existe de nombreuses façons de définir l'arrière-plan en HTML. Selon les besoins réels, vous pouvez définir la couleur d'arrière-plan, l'image d'arrière-plan et la position de l'arrière-plan via des attributs. En utilisant ces attributs de manière flexible, vous pouvez rendre la conception de la page Web plus belle et améliorer l'expérience utilisateur.

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!

css html 选择器 position background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un environnement de développement HTML5 sur Windows et Mac OSArticle suivant：Comment créer un environnement de développement HTML5 sur Windows et Mac OS

Articles Liés

Voir plus