Réaliser sa page Web
   Leçon 15 : Les images à fond transparent

Voyons un exemple

La technique des images transparentes permet de superposer sur une même page plusieurs images sans que les fonds de l'une ne masque une partie d'une autre. Son utilisation principale est lors de l'insertion d'une image sur une page qui contient déjà un fond.

Imaginons par exemple que vous vouliez insérer sur une page contenant une image de fond une nouvelle image transparente.

Voici le code HTML de cette page et l'image :

<HTML>
<HEAD>
<TITLE>Test image Transparente</TITLE>
</HEAD>
<BODY BACKGROUND="fond.gif"
  BGCOLOR="#FFFFFF"
  TEXT="#000000" LINK="#000080"
  VLINK="#800080" ALINK="#FF0000">
<IMG SRC="image1.gif" BORDER="0" WIDTH="200" HEIGHT="200">
</BODY>
</HTML>


Voici le résultat :


Appliquer la transparence

On va utiliser un logiciel de retouche d'image pour rendre une couleur transparente :

  1. Chargez l'image dans le logiciel de retouche.
  2. Sélectionnez le "Dropper" qui permet de sélectionner une couleur dans la palette de couleurs disponible.
  3. Sur l'image, cliquez avec le bouton DROIT sur la couleur que vous désirez rendre transparente (ici le noir). Dans la palette de couleur, la couleur de fond doit changer et prendre la couleur que vous venez de choisir.
  4. Ensuite Choisissez "Enregistrer Sous..." dans le menu Fichier. Sélectionner l'option GIF, puis allez dans le menu OPTION, cliquez sur APPLIQUER LA TRANSPARENCE A LA COULEUR DE FOND, et sauver.







Le résultat final


   On résume :
  • Chaque logiciel de retouche d'images possède cette fonction de transparence lors de la sauvegarde au format GIF, lisez la documentation du logiciel.