28173 sujets

CSS et mise en forme, CSS3

Problème avec la propriété opacity

Bonjour à tous,

J'ai quelques soucis avec l'utilisation de la propriété opacity. J'ai fait des recherches mais je n'ai rien trouvé qui réponde à mon problème.

Le contexte : j'ai une page html classique. Lorsque l'utilisateur clique sur un bouton, je voudrais afficher une div translucide (pour voir encore un peu le contenu de ma page) et dans cette div mettre une autre div centrée sur l'écran et qui ne soit plus transparante.

Le problème : la deuxième div (qui ne doit pas être transparante), reste transparante, ce qui est plutôt génant pour lire le texte qui s'y trouve.

Le code : Voici le code html de ma page : 

<body>
   <div id="transbox">
     <div id="contenu">50% Lorem ipsum dolor sit amet, consectetuer adipiscing etc. etc.</div>
   </div>
 </body>

Et le code CSS : 
#transbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  filter:alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity:0.5;
}

#contenu{
  text-align: center;
  width: 300px;
  background-color: #fff;
  filter:alpha(opacity=100);
  opacity: 1;
  -moz-opacity:1;
  border: 2px solid #f00;
  position: relative;
}


Si vous avez des idées...,
merci d'avance.
Modifié par pitivier (25 Apr 2006 - 14:29)
moi aussi j'ai déja essayer la transparence d'un calque et annuler la transparence de l'enfant ... mais apparament on ne peut pas le faire (dans l'état actuel des choses).

J'ai utilisé les propriétés suivantes : sur les navigateurs Mozilla et Ie ça pose problème, sur Opéra il n'y a pas de transparence supporté et je n'ai pu essayer sur Konqueror et/ou Safari

opacity: 0.6; /* CSS3 opacity */
filter: alpha(opacity = 60); /* opacity by Ie */
-moz-opacity: 0.6; /* opacity by Gecko browsers */
-khtml-opacity: 0.6; /* opacity by Konqueror & Safari */
Sujet clos
Aller à