Médiaforma

All posts tagged transparence

Pour définir une image GIF avec un fond transparent, l’application Paint, livrée avec Windows, n’est pas suffisante. Je vous suggère d’utiliser l’application Photofiltre, librement téléchargeable sur la page http://www.photofiltre.com.

Ouvrez l’image pour laquelle vous voulez définir un arrière-plan transparent. Lancez la commande Couleur de transparence dans le menu Image. Un message vous indique que la transparence n’est utilisable que sur des images qui contiennent 256 couleurs. Cliquez sur Oui pour continuer. Une boîte de dialogue intitulée Couleur de transparence est affichée. Dans l’image, cliquez sur la couleur que vous voulez rendre transparente, puis validez en cliquant sur OK. Il ne vous reste plus qu’à enregistrer l’image au format GIF.

Pour vérifier que l’arrière-plan de l’image est bien transparent, nous allons afficher l’image originale et l’image rendue transparente dans une page qui contient une image d’arrière-plan.

La ligne 4 définit l’arrière-plan de la page. Ici, il s’agit de l’image “fond-neige.jpg”. L’attribut style demande que l’image d’arrière-plan ne soit pas répétée.

Les lignes 5 et 6 affichent l’image originale et l’image rendue transparente.

Voici le résultat :


La rubrique précédente vous a montré comment définir des couleurs en CSS en utilisant un code hexadécimal ou en transmettant des valeurs comprises entre 0 et 255 ou des pourcentages à la fonction rgb(). Vous allez maintenant franchir un pas supplémentaire en utilisant la fonction CSS3 rgba(r, v, b, a). Dans cette fonction :

  • r, v et b représentent les composantes rouge, verte et bleue de la couleur, comprises entre 0 et 255 ou entre 0% et 100% ;
  • a représente la transparence, entre 0 (totalement transparent) et 1 (totalement opaque).

A titre d’exemple, nous allons réutiliser le code de la rubrique précédente, en affectant une transparence de 0.8 à l’arrière-plan de couleur rouge, une transparence de 0.5 à l’arrière-plan de couleur verte et une transparence de 0.2 à l’arrière-plan de couleur bleue.

La commande Exécution / Launch in IE affiche le résultat dans Internet Explorer :