[Résolu] Effet Transparent avec CSS

Bonjour,

Le fond de mon site est constitué d'une image. Dessus cette image sont disposés des menus !

J'aimerais que l'intérieur des menus soit opaque (un peu grisé) pour pouvoir voir l'image de fond du site. Vous avez compris? J'ai été voir dans la FAQ mais je n'ai rien trouvé

Merci

Modifié par doudi (18 Feb 2005 - 14:45)

Salut,

je suis tombé là-dessus:
http://marcarea.com/tuto/menu01test.html

Très malin. Cherche un peu le truc.

@+, HoPHP

P.S. Tu t'es présenté ?

J'ai trouvé un lien qui correspond à ce que j'aimerais faire sur mon site ! le voici : http://batraciens.net/css-astuces/transparence-1.htm

J'aimerais éviter d'utiliser un gif transparent (pour ne pas trop charger la page). Si vous connaissez un autre moyen faites moi signe

Merci

édit du lien par Igor
Modifié par Igor (18 Feb 2005 - 02:27)

Dans les tutoriaux d'alsa, il y a une technique qui devrait te permettre de faire ce que tu veux. L'idée est d'avoir une copie légèrement grisée de ton image de fond, et de la mettre en background de ton menu. Cet exemple devrait te permettre de voir si ça correspond à ce que tu cherches. L'inconvénient est que ca augmente le poids de ta page...
Modifié par Thorn (17 Feb 2005 - 23:09)

C'est presque ça ! mais ça n'est pas un rollover que je cherche !
Je reviens demain et je vais joindre une image pour vous montrer ce que j'aimerais faire .
Modifié par doudi (17 Feb 2005 - 23:45)

voila un exemple de transparence que j'aimerais avoir !

En ce moment j'utilise deux fonds d'écran:
- un dragon rouge clair;
- un dragon rouge un peu plus grisé.

Ca fonctionne super bien, sauf que ça fait un peu lourd d'avoir deux images ! donc j'aimerais mettre que l'image du dragon rouge clair en fond ! Pour avoir l'effet grisé (qui apparait dans le bloc "contenu") j'aimerais utiliser le CSS si c'est possible !

J'espère que vous m'avez bien compris !
Bon je vais me coucher bonne nuit tout le monde

Tu pourras en utilisant des propriétés propriétaire à chaque navigateur, je les ai plus en tête, mais en gros les
-moz-opacity (geckos) ou un truc du genre
filter opacity (IE) ou un truc du genre
Et il doit y avoir la version Opera je pense.

C'est assez crade, très peu efficace

Sinon, tu as la solution d'utiliser une image de fond noir avec opacité à disons 15% (à toi d'ajuster pour obtenir l'effet voulu), tu sauves ça en PNG-24 bits, et ça roule partout sans hacks mais pas sous IE. Pour IE tu as la possibilité d'utiliser le hack IE7, très lourd d'implémentation (plus que tes 2 images à mon avis) et ne marchera pas si javascript est inactif.
Sinon, tu peux aller faire la guerre à microsoft pour qu'ils adaptent le PNG-24 bit pour IE.

Voilà grosso modo les alternatives que tu as.

La solution à base d'une seul image et du PNG transparent pour la zone centrale me semble la meilleure, au diable IE
Modifié par Olivier (18 Feb 2005 - 00:48)

Autre solution : donner l'impression visuelle d'une transparence partielle en mettant en fond de zone une image en motif de 2 x 2px
1px couleur de fond 1 px transparent
1 px transparent 1px couleur de fond

NB : Je crois qu'on doit ce truc à Todd Fahrner


Autre solution again :
Utiliser plusieurs images, avec le position : fixed, comme sur le site de Eric Meyer. Pb : ça t'oblige à utiliser le hack IE pour le position : fixed.
Modifié par Marvin Le Rouge (18 Feb 2005 - 02:09)

Question CSS ? Je déplace en salon CSS

Marvin Le Rouge a écrit :

Autre solution : donner l'impression visuelle d'une transparence partielle en mettant en fond de zone une image en motif de 2 x 2px
1px couleur de fond 1 px transparent
1 px transparent 1px couleur de fond

J'aime bien cette solution si on s'attend à ce qu'un texte placé « sur » l'image semi-transparente sera distortionné. Plus le texte est petit, plus la distortion est forte.

J'avais mis mon post dans le theme des débutants car j'en suis un merci pour vos réponses, je connaissais déja l'existance de ses techniques ! je vais devoir m'en contenter
Bonne journée

Stephan a écrit :

J'aime bien cette solution si on s'attend à ce qu'un texte placé « sur » l'image semi-transparente sera distortionné. Plus le texte est petit, plus la distortion est forte.

Je ne comprends pas : de quelle distorsion parles-tu ?

NB : On dit "distordu", et pas "distortionné"; ne commençons pas à nous exprimer tels des présentateurs de journées téévisés

Marvin Le Rouge a écrit :

Je ne comprends pas : de quelle distorsion parles-tu ?

Si on utilise une image semi-transparente, c'est pour laisser voir quelque chose à travers. Or, souvent ce « quelque chose » est une image et cette image « peut » créer une interférence avec le texte sus-jacent.

Marvin Le Rouge a écrit :

NB : On dit "distordu", et pas "distortionné";

C'est noté.

Marvin Le Rouge a écrit :

ne commençons pas à nous exprimer tels des présentateurs de journées téévisés

?

"distortionné" vient d'une déformation linguistique qui doit probablement toucher le Québec. J'aurais eu tendance à dire ce mot moi aussi. Ceci dit, tu devrais écouter tes journaux télévisés à un autre canal.

le bon compromis serait peut-être d'utiliser un hack de type child selector pour afficher le gif sous ie et le png avec alpha pour 'les autres'