28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai un p'tit souci avec la gestion de l'opacité.
J'ai une div avec un bg noir et une opacité de 0.5
Et au milieu de cette div j'en ai une autre.
Le problème est qu'elle a la même opacité que la div mère alors que je lui est mis une opacité a 0.99

<div style="width:100%; height:100%; background-color:#000; z-index:1; position:fixed; -moz-opacity:0.5; opacity: 0.5; filter:alpha(opacity=50); padding: 195px 0pt;">
<div id="error">ATTENTION bla bla bla</div>
</div>

#error,#validation,#message{-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border-style:solid;border-width:1px;margin:0 auto 30px auto;max-width:700px;padding:12px;color:#fff;z-index: 100;-moz-opacity:0.9; opacity: 0.9; filter:alpha(opacity=90);}
#error{background:#cb2c1a;background:-webkit-gradient(linear,left top,left bottom,from(#d96d3a),to(#cb2c1a));background:-webkit-linear-gradient(top,#d96d3a,#cb2c1a);background:-moz-linear-gradient(center top,#d96d3a 0,#cb2c1a 100%) repeat scroll 0 0 transparent;background:-ms-linear-gradient(top,#d96d3a,#cb2c1a);background:-o-linear-gradient(top,#d96d3a,#cb2c1a);border-color:#cb2c1a;text-shadow:0 1px 0 #ad2516}
problème réglé :
width:100%; height:100%; background:url('/images/confirm/ie.png');background:-moz-linear-gradient(rgba(11,11,11,0.1),rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);background:-webkit-gradient(linear,0% 0,0% 100%,from(rgba(11,11,11,0.1)),to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2); z-index:1; position:fixed; padding: 195px 0pt;
Oui, le rgba est une manière de contourner le problème. Pensez cependant au fait que cela ne marche pas sur IE8. Navigateur malheureusement encore très usité.
C'est pour cette raison que j'utilise : background:url('/images/confirm/ie.png');
Cela affiche un png partiellement transparent pour faire illusion.