Comment définir l'arrière-plan en HTML ? Une brève analyse de diverses méthodes-Questions et réponses frontales-php.cn

Maison

interface Web

Comment définir l'arrière-plan en HTML ? Une brève analyse de diverses méthodes

Apr 21, 2023 am 11:27 AM

Dans la conception Web, la définition de l'arrière-plan est une compétence très basique. En HTML, nous pouvons définir l'arrière-plan de la page de différentes manières, notamment un arrière-plan de couleur unie, un arrière-plan d'image, un arrière-plan répétitif, un arrière-plan en mosaïque, un arrière-plan dégradé, etc. Ci-dessous, je vais vous présenter comment utiliser ces méthodes pour définir l'arrière-plan des pages HTML.

Arrière-plan de couleur unie

L'arrière-plan de couleur unie est le type d'arrière-plan le plus simple. Il vous suffit de définir l'attribut de couleur d'arrière-plan du HTML. Par exemple :

&lt;body style=&quot;background-color: #f2f2f2;&quot;&gt;

Copier après la connexion

où #f2f2f2 est un code couleur hexadécimal représentant le gris clair. Vous pouvez trouver plus de codes de couleur ici : https://htmlcolorcodes.com/.

Fond d'image

En HTML, nous pouvons utiliser des images comme arrière-plan de la page. Vous pouvez utiliser directement la balise img pour y parvenir, mais cela peut affecter la vitesse de chargement de la page, il est donc recommandé d'utiliser CSS pour définir l'image d'arrière-plan. Par exemple :

&lt;body style=&quot;background-image: url(&#39;image.jpg&#39;);&quot;&gt;

Copier après la connexion

où image.jpg est l'image que vous souhaitez définir comme arrière-plan. Notez que l'image doit être placée dans le même répertoire que le fichier HTML. Vous pouvez utiliser des chemins relatifs ou absolus pour spécifier les emplacements des images. Vous pouvez également ajouter d'autres attributs, tels que le code suivant pour définir la position de l'image à centrer et non répétée :

&lt;body style=&quot;background: url(&#39;image.jpg&#39;) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;&quot;&gt;

Copier après la connexion

L'attribut de couverture ici ajustera automatiquement la taille de l'image pour l'adapter à la taille de la page. Si vous ne souhaitez pas que l'image soit étirée et déformée, vous pouvez utiliser contenir au lieu de couvrir.

Répéter l'arrière-plan

La définition d'un arrière-plan répétitif peut créer une petite image en mosaïque continue pour remplir toute la page, réduisant ainsi la taille de l'image et améliorant la vitesse de la page. En CSS, utilisez répéter ou répéter-x ou répéter-y pour définir la façon dont l'image se répète. Par exemple :

&lt;body style=&quot;background-image: url(&#39;image.jpg&#39;); background-repeat: repeat-y;&quot;&gt;

Copier après la connexion

Arrière-plan en mosaïque

L'utilisation d'un arrière-plan en mosaïque permet de mosaïquer une image ou une couleur jusqu'à ce qu'elle remplisse tout l'arrière-plan de la page. En CSS, utilisez les propriétés background-size et background-position pour contrôler la position et la taille des images ou des couleurs. Par exemple :

&lt;body style=&quot;background-image: url(&#39;image.jpg&#39;); 
    background-position: center top; 
    background-size: auto 100%;
    background-repeat: no-repeat;&quot;&gt;

Copier après la connexion

auto et 100 % signifient ici un ajustement automatique de la largeur, tandis que la hauteur est de 100 %.

Arrière-plan dégradé

Utilisez un arrière-plan dégradé pour rendre votre page plus élégante. En CSS, vous pouvez utiliser un dégradé linéaire ou un dégradé radial pour créer des dégradés plats ou radiaux. Par exemple :

&lt;body style=&quot;background: linear-gradient(to right, #f2f2f2, #ffffff);&quot;&gt;

Copier après la connexion

To right est utilisé ici pour indiquer que la direction du dégradé est de gauche à droite, #f2f2f2 et #ffffff sont les valeurs de couleur des points de départ et d'arrivée.

Résumé

Il existe de nombreuses façons de définir l'arrière-plan d'une page HTML, notamment un arrière-plan de couleur unie, un arrière-plan d'image, un arrière-plan répétitif, un arrière-plan en mosaïque et un arrière-plan dégradé. Grâce à ces méthodes, vous pouvez ajouter différents styles et fonctionnalités à votre site Web.

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!

Déclaration de ce site Web

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