Médiaforma

Créer une image GIF ou PNG transparente

Print Friendly

Les formats d’image GIF et PNG permettent de définir une couleur de transparence. Vous pourrez ainsi superposer deux images en faisant en sorte que celle qui se trouve en avant-plan s’intègre parfaitement à celle qui se trouve en arrière-plan. Dans cette rubrique, je vais vous montrer comment obtenir cet effet :

Si le logiciel Photofiltre n’est pas encore installé sur votre ordinateur, rendez-vous sur la page http://photofiltre.softonic.fr/telecharger et installez-le.

Lancez Photofiltre en tapant photofiltre dans la zone de texte Rechercher du menu Démarrer. Ouvrez le fichier pour lequel vous voulez créer une couleur de transparence. Assurez-vous que ce fichier est au format GIF ou PNG, sans quoi, vous ne pourrez pas définir une couleur de transparence. Sélectionnez l’outil Baguette magique et cliquez sur la zone blanche qui entoure l’image. Cette zone est maintenant sélectionnée. Déroulez le menu Image, pointez Transparence automatique et cliquez sur Région intérieure à la sélection. Cette simple commande rend l’arrière-plan de l’image transparent. Sauvegardez l’image ainsi modifiée en lui donnant un autre nom. Ici, nous choisissons le nom chat-transparent.png.

Il ne reste plus qu’à écrire quelques lignes de HTML pour superposer le chat et l’arrière-plan.

La ligne 8 met en place l’image d’arrière-plan et l’affiche en haut et à gauche de la fenêtre du navigateur.

La ligne 9 affiche le chat au-dessus de l’arrière-plan. Pour ceux qui n’auraient pas suivi les rubriques précédentes, l’attribut z-index définit l’ordre de superposition des éléments. Plus sa valeur est grande, plus l’élément se trouve en avant-plan. Ici, le z-index du chat vaut 2 et celui de l’arrière-plan vaut 1 : le chat se trouve dont devant l’arrière-plan. Les coordonnées top et left sont initialisées à 80px et 40px pour centrer le chat sur l’arrière-plan.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply