Discussion :

[defacta]

Salut,

Pour avoir de la transparence sur un objet, il suffit de préciser dans le style de l'objet:
filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;

Est-il possible de dire à un objet, une div, un span, un tableau ou un td d'appliquer de la transparence uniquement à son background et non pas au texte qui se trouve dans cet objet ?

Je pourrais utiliser un png à demi transparent mais cela ne fonctionne pas avec IE...

Merci,
Vincent.

[defacta]

En fait, je viens de me rappeler que j'ai déjà fait cet effet, il est visible à cette adresse:

http://boxfly.free.fr/test/ghp-admin/

Là ou cela demande:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 Domain of the server:  	   	
 Username:   	  	
 Password:   	  	
 MySQL database name:

On voit bien que le fond est à demi-transparent, par contre j'ai pondu ce code y a bien longtemps et à cette époque n'existait pas Safari, Google Chrome et donc cela ne fonctionne correctement qu'avec IE et Firefox.
Avec les autres navigateurs, il n'y a pas de background du tout.

Va falloir que je regarde comment j'ai fait et l'adapter pour que cela fonctionne avec tous les nav., ou sinon, si qqn a un tuto sous la main, je suis preneur.

[Bisûnûrs]

La meilleure solution est comme tu l'as fait, un PNG transparent en fond. Sinon tu es obligé de faire deux deux frères, un ayant le texte et l'autre le fond, et dont l'un positionné en absolu (donc avoir un parent relatif) vient se coller par-dessus ou par-dessous, c'est selon.

Et concernant le fait que le fond ne s'affiche pas sur Chrome, sans doute un Javascript foireux. C'est pourtant tellement plus simple de le faire en CSS.

[defacta]

Bon voilà, c'est fait, j'ai arrangé la page, je l'ai simplifiée.

Il faut un objet dans un autre pour IE, dans mon cas c'est un tableau dans un autre tableau, sinon la transparence concerne aussi le texte.

Voilà le résultat:
http://boxfly.free.fr/test/bg-opacity/

Le code javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function DoTrans() {
  if(document.all) {
     document.getElementById('tab_0').style.backgroundColor  = "#FFFFFF" ;
     document.getElementById('tab_0').filters.alpha.opacity = 20 ;
  } else {
     document.getElementById('tab_0').style.backgroundImage = 'url("images/fond_gc.png")' ;
  }
}

Test positif avec tous les navigateurs: IE, Firefox, Safari, Google Chrome et Opera.

PS: Le code javascript a pour unique but de palier à l'absence de gestion des png de la part d'IE, sous navigateur produit par l'entreprise la plus riche du monde !

[Bovino]

PS: Le code javascript a pour unique but de palier à l'absence de gestion des png de la part d'IE, sous navigateur produit par l'entreprise la plus riche du monde !

IE7 et 8 gèrent correctement les PNG !

[defacta]

IE7 et 8 gèrent correctement les PNG !

IE6 est maintenu jusqu'en 2014...
http://www.developpez.net/forums/d79...er-contre-ie6/
Tout de même, il aura bien vécu celui-là !

[Bisûnûrs]

Et donc le mieux serait de faire la différence avec une feuille de style supplémentaire incluse par commentaires conditionnels ciblant uniquement IE6 et inférieurs.