28172 sujets

CSS et mise en forme, CSS3

Bonjour

cela fait plus d'une heure que j'essaye de gérer la transparence sur une image et aussi sur un background image mais cela ne marche pas. Pourtant j'ai été voir sur le net

voici mon code html


div id="logo">
            		<a href="home.html" target="_parent"><img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="images/Id-carrieres.png" alt="Id-Carrières, catalyseur de votre parcours professionnel" width="202" height="70" title="Id-Carrière"  /></a>
                </div>



voici mon css


img, div {
   behavior: url(js/png.htc);
}


j'ai également mis le HTC dans le dossier js qui est à la racine de mon site. le blank.gif qui est dans mon dossier images qui est lui aussi à la racine

merci de votre aide
Modifié par dedel53chipie (16 Mar 2009 - 17:45)
salut

essaie ceci

<style> 
  div#logo { 
    filter : alpha(opacity=10); /* 0 => 100 = transparent => opaque */
    -moz-opacity : 0.1; /* 0.0 => 1.0  = transparent => opaque */
    opacity : 0.1; /* 0.0 => 1.0  = transparent => opaque */
  } 
</style>


l'opacité est valable pour les enfants, il est impossible d'inverser l'opacité sur les enfants.

++
Modifié par flattazor (16 Mar 2009 - 19:40)
Bonjour,

flattazor, trois remarques:

1. -moz-opacity ne sert plus à rien depuis Firefox 0.8 ou 0.9. À oublier, virer de son CSS pour gagner une ligne, etc. Smiley cligne

2. Internet Explorer 8 n'implémente pas opacity (bouh), mais requiert une syntaxe standardisée pour la propriété filter, qui devient -ms-filter, avec des paramètres assez différents. Je te laisse chercher ça.

3. La question de dedel53chipie ne porte pas sur opacity, par contre, mais sur le support du PNG-32 dans IE6.

dedel53chipie, quelques pistes:

1. Il y a un article sur le support de la transparence PNG dans IE6, ici même sur Alsacréations. Je suppose que tu le connais par coeur? Smiley cligne

2. Tu ne peux pas utiliser un filtre DirectX AlphaImageLoader directement sur une image (élément IMG), il me semble.

3. Jamais tenté d'utiliser le png.htc via la propriété behavior en CSS. C'est peut-être censé marcher, mais vu que c'est du JS autant passer par du «vrai» JS appelé normalement et pas depuis le CSS. Il y a des scripts qui gèrent l'utilisation automatique du filtre AlphaImageLoader, je pense que leur utilisation est préférable.

4. Je préfère utiliser le filtre AlphaImageLoader à la main, je trouve ça plus fiable. On sait avec plus de précision ce qu'il se passe, à quels éléments on attribue le layout (ce qui peut avoir un impact sur la mise en page), etc.

5. Je préfère aussi éviter le filtre AlphaImageLoader comme la peste. Ses mise en place est laborieuse, et ses effets secondaires sont assez casse-tête. Donc, autant que possible: images opaques (souvent possible), PNG-8 ou GIF (le PNG-8 est un peu plus performant), ou dégradation gracieuse dans IE6 avec une image de fond différente ou en exploitant la couleur de fond enregistrée comme métadonnée de l'image PNG-32 (bKGD chunk).
Florent V. a écrit :

1. -moz-opacity ne sert plus à rien depuis Firefox 0.8 ou 0.9. À oublier, virer de son CSS pour gagner une ligne, etc. Smiley cligne

+1 -moz-opacity n'est qu'un alias de opacity.

Florent V. a écrit :

2. Internet Explorer 8 n'implémente pas opacity (bouh), mais requiert une syntaxe standardisée pour la propriété filter, qui devient -ms-filter, avec des paramètres assez différents. Je te laisse chercher ça.

Je crois que cette syntaxe
filter: "alpha(opacity=60)";

est sensée fonctionner pour IE8 (avec les guillemets donc).

Il faudra ajouter à la liste -khtml-opacity: ...; pour Konqueror (version 3.1+ je crois)
Modifié par Hermann (16 Mar 2009 - 22:30)
Hermann a écrit :
Je crois que cette syntaxe
filter: "alpha(opacity=60)";

est sensée fonctionner pour IE8 (avec les guillemets donc).

Se référer à: http://www.quirksmode.org/css/opacity.html

Hermann a écrit :
Il faudra ajouter à la liste -khtml-opacity: ...; pour Konqueror (version 3.1+ je crois)

Bof. Konqueror 3.1 a sans doute moins de parts de marché qu'IE 5.0, et les versions un minimum récentes comprennent opacity. Je dirais que c'est aussi obsolète que -moz-opacity.
Concernant la syntaxe IE8 je n'ai pas eu le même son de cloche mais bon les 2 syntaxes fonctionnent peut-être.

Florent V. a écrit :

Bof. Konqueror 3.1 a sans doute moins de parts de marché qu'IE 5.0, et les versions un minimum récentes comprennent opacity. Je dirais que c'est aussi obsolète que -moz-opacity.

C'était 3.1+ mais j'avais pas pu testé si opacity fonctionnait sur les version récentes n'étant pas sur Linux, donc merci pour l'info, on peut s'en passer en effet. Smiley cligne
Modifié par Hermann (17 Mar 2009 - 10:52)