PRATIQUE CLIENTS WEB 
Jouer avec les transparences en CSS
 
Utiliser la couche alpha du format d'image PNG autorise quelques subtilités en matière d'interface... (08/07/2004)

 

  Forum

Réagissez dans les forums de JDN Développeurs

CSS permet de rendre transparents certains éléments, mais pas de créer un pourcentage de transparence pour rendre un élément vaguement translucide. Pour cela, il faut faire appel au format d'image GIF, voire mieux : PNG.

En effet, si le format GIF permet de déclarer certaines couleurs comme étant transparentes, on ne peut pas leur attacher un taux de transparence : mis à part en faisant un dégradé, difficile de rendre proprement la transition entre l'image et le fond devant laquelle elle se trouve.

PNG permet de manipuler ce taux et autorise donc quelques subtilités graphiques. Malheureusement, ces subtilités ne sont pas possibles (pour le moment) avec Internet Explorer, car la gestion de la couche alpha des images PNG n'y est pas implémentée. Donc, là où dans Mozilla ou Opera on verra une image translucide, dans IE on verra l'image telle quelle.

Ob. Well, go thy way; thou shalt not from this grove, Till I torment thee for this injury-- My gentle Puck, come hither: There is a flow'r, the herb I shew'd thee once, The juice of it on sleeping eyelids laid, Will make a man or woman madly doat Upon the next live creature that it sees. Fetch me that herb, and be thou here again Ere the leviathan can swim a league.
Ob. Having once this juice, I'll watch Titania when she is asleep, And drop the liquor of it in her eye; The next thing which she waking looks upon, (Be it on bear, lion, wolf, bull, ape or monkey), She shall pursue it with the soul of love; And ere I take this charm off from her sight, (As I can take it with another herb), I'll make her render up her page to me. [Exit.
Bot. I will discharge it in either your straw-colour'd beard, your orange-tawny beard, your purple-in-grain beard, or your French-crown-colour'd beard, your perfect yellow. Quin. Some of your French-crowns have no hair at all, and then you will play bare-fac'd. But, masters here are your parts, and I am to intreat you, request you, and desire you to con them by to-morrow night; and meet me in the palace-wood, a mile without the town, by moonlight, there we will rehearse; for if we meet in the city, we shall be dog'd with company, and our devices known. In the mean time I will draw a bill of properties, such as our play wants. I pray you fail me not.

Successivement, vous devriez voir un bloc légèrement coloré (grâce à un pixel transparent), et deux blocs avec des images translucides. Exceptionnellement, pour mieux apprécier la chose, nous avons mis une image fixe en fond de page : déplacez la barre de défilement pour voir la réaction... (notez qu'il est aussi possible de rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de celui-ci opaque en CSS)


Le code
<style>
div
  {
  width: 50%;
  border: 1px solid black;
  }
div.bla
  {
  background: url(img/transpix.png) repeat;
  }
div.blabla
  {
  background: url(img/trans1.png) repeat;
  }
div.blablabla
  {
  background: url(img/trans3.png) repeat;
  }
body
  {
  background: url(img/background.gif) fixed;
  }
</style>

 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page