Liens et filtres IE pour rendre les fonds PNG transparents

[Benoit]

Bon le titre est un peu compliqué mais je suis face à un problème assez insoluble.

Je veux faire un "bête" paragraphe flottant par dessus une image, laquelle apparaît par transparence mais permet quand même de lire le texte, donc il faut atténuer l'image.

Mon balisage ressemble à ça :

Code : Tout sélectionner

<img src="../img/grandephoto.jpg" alt="">
 <div class="textbox">
  <p>Un peu de texte inintéressant, mais surtout <a href="http://www.geckozone.org">un lien</a>.</p>
  <p>Encore un peu de texte.</p>
 </div>

La solution dans un navigateur supportant la transparence PNG est très simple : je mets un PNG uni blanc translucide (environ 50% de canal alpha) comme fond de mon div (ici, background.png) et ça fonctionne parfaitement (Firefox et Opera).

Code : Tout sélectionner

  <style type="text/css">
    .textbox {
      position: absolute; 
      top: 8.5em; 
      left: 3em; 
      padding: 0.5em; 
      border: 1px solid black;  
      background:url(../img/background.png);         
      width: 55em;
    }

Maintenant pour que mon PNG soit transparent sous IE aussi, je lui applique une transformation DirectX dans un commentaire conditionnel (tadam) et ça fait le même effet.

Code : Tout sélectionner

  <!--[if IE]>
  <style type="text/css">
    .textbox {
      background: none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/background.png',sizingMethod='scale');
    }    
  </style>  
  <![endif]-->

Sauf que... les liens ne fonctionnent plus après ça ! Je sais toujours sélectionner le texte mais pas cliquer dessus. J'ai essayé plein de possibilités de z-index mais pas moyen de faire passer le lien "devant" sous IE. C'est bien de la faute du filtre parce que quand je l'enlève ça fonctionne de nouveau (mais le fond est opaque puisque le PNG est chargé "normalement").

Est-ce que quelqu'un a une idée de solution ? Ou pour reproduire le même effet d'une autre manière sans trop changer le balisage HTML ?

[calimo]

Et la propriété CSS3 "opacity" ne fonctionnerait-elle pas ? Ça me paraitrait plus logique, parce qu'on ne peut pas sélectionner ce qui est "derrière"...

[Benoit]

Du CSS3 qui fonctionnerait dans IE ?

Non, je ne veux pas que mon texte soit translucide (sinon il reste tout aussi illisible), juste son fond.

[calimo]

Euh... j'ai un peu de peine à suivre là... tu veux que seule l'image d'arrière-plan soit atténuée ? Dans ce cas pourquoi ne pas la modifier directement dans un éditeur d'images ?
Sinon tu ne peux pas jouer sur le z-index pour placer le texte au-dessus ?

[Benoit]

Mon image est très bien. C'est juste IE qui ne sait pas l'afficher telle quelle (forcément tout ce qu'elle fait c'est être semi-transparente)

C'est pourquoi je lui applique la transformation DirectX qui va bien... et que du coup elle passe (apparemment) au-dessus du lien alors que c'est une image de fond en théorie...

C'est ce que je ne comprends pas et ça ne me plait pas de tout recommencer.

Je suppose que je pourrais mettre à la place l'image de fond atténuée mais alors je me retrouve avec le problème de complexspiral, c'est-à-dire que l'image de fond n'est pas positionnée par rapport au bon élément. Pour que ça fonctionne je devrais donc avoir mon cadre qui commence exactement au même point à chaque fois et sur chaque page, et donc aussi utiliser des pixels au lieu d'unités flexibles... bref des trucs pas beaux.

[DJiK]

Je suppose que je pourrais mettre à la place l'image de fond atténuée

J'allais dire pas à la place, mais en fond de "autre chose", tu rajoutes un div ou un truc avec l'image atténuée en fond.


J'avoue que j'ai un peu de mal à visualiser quand m^! Une image, du texte par dessus, et une autre image par dessus, si j'ai bien compris? Pourquoi pas atténuer le texte?

[martin]

As tu essayé de passer par ces solutions :
http://www.mongus.net/pngInfo/
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://dean.edwards.name/IE7/

Elle sont basées sur le filtre MS, mais peut être de manière plus subtile...