Discussion :

[Baptiste78]

Bonjour,

J'ai un div

Code :

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

<div style="width: 263px; height: 24px; background-image: url(barre_haut.gif); padding-left: 10px; filter:alpha(opacity=70);-moz-opacity:0.70;opacity:0.70;">

Dans ce div, j'ai des images et du texte, le problème est, que je veux appliquer seulement l'opacité 70 à l'image de fond de mon div (barre_haut.gif), je veux que les images et le texte soient à opacité maximum...comment faire ?

Merci d'avance pour votre aide,
Bonne journée.

[Ethyde]

Bonjour,

L'opacité s'applique à toutes éléments contenu, et sans avoir vraiment cherché, je n'ait jamais trouver comment faire, hormis à repenser ma structure ou mes images

[Baptiste78]

Le problème est que je ne peux pas disposer mes divs autrement, j'avais déjà essayé et c'était impossible dans ma situation.

Ne serait-il pas possible de créer un effet de transparence avec du javascript par exemple ?

[Ethyde]

Peut être mais j'avoue ne jamais avoir chercher dans cette voie, et avoir préféré trouver des méthodes mettant en oeuvre moins de techno pour une simple transparence

Si tu nous donnais un lien ou ton code source histoire de se rendre compte

[adiGuba]

Salut,


opacity s'applique forcément à l'élément complet (textes et images), y compris ses descendants.

Une solution serait de convertir ton image en PNG et d'appliquer une transparence directement sur l'image. L'avantage du PNG sur le GIF est justement de gérer un niveau de transparence par pixel, là où le GIF ne possède qu'une couleur totalement transparente.


Quelques exemples ici : http://entropymine.com/jason/testbed/pngtrans/

Seul problème : cela ne fonctionne pas sous IE5.5 et IE6.
Si tu as besoin de supporter ces navigateurs à l'identique il faudra passer par du javascript supplémentaire pour corriger cela : http://www.twinhelix.com/css/iepngfix/

a++

[BnA]

Ce qui suit ne marche pas?

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
div#aRendreTransparente{
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
 
div#aRendreTransparente *{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

En gros, on applique la transparence (0.7) à la DIV et son contenu, mais on redéclare directement une transparence (à 1, donc opaque) à tout le contenu de cette DIV.

Ca, ça ne marche pas? (J'avoue que je n'ai jamais testé cette méthode)

[Baptiste78]

Salut,


opacity s'applique forcément à l'élément complet (textes et images), y compris ses descendants.

Une solution serait de convertir ton image en PNG et d'appliquer une transparence directement sur l'image. L'avantage du PNG sur le GIF est justement de gérer un niveau de transparence par pixel, là où le GIF ne possède qu'une couleur totalement transparente.


Quelques exemples ici : http://entropymine.com/jason/testbed/pngtrans/

Seul problème : cela ne fonctionne pas sous IE5.5 et IE6.
Si tu as besoin de supporter ces navigateurs à l'identique il faudra passer par du javascript supplémentaire pour corriger cela : http://www.twinhelix.com/css/iepngfix/

a++

Tout d'abord merci pour vos réponses !

J'aimerais appliquer ta solution, si j'ai bien compris ce n'est pas le serveur qui agit sur la transparence de l'image mais l'image elle même, donc logiquement il faut un logiciel pour le faire. Quel logiciel utiliser pour rendre mon image transparente ?

Merci d'avance !