Transparence CSS

21 mars 2007, 21:23

Hello !

Ca fait un petit moment que je cherche maintenant, mais je n'ai pas trouvé de solution à mon soucis. J'ai sur ma page un bloc que je rend légèrement transparent avec du css.

Code : Tout sélectionner

   background-color:#e0e0e0;
   filter:alpha(opacity=70);
   -moz-opacity:0.7;
   opacity: 0.7;

Dans ce bloc, j'ai d'autres blocs qui subissent donc également la transparence, mais que je voudrais rendre opaque (voire juste "moins transparent"). Mais impossible de trouver une solution pour revenir en arrière en redefinissant un filtre foncé ou en utilisant un bg de couleur, une image...

La taille de mon bloc principal variant selon le contenu, pas moyen de jouer sur le z-index et coller le div avec le filtre transparent en dessous.

Avez-vous déjà eu ce problème ? Auriez-vous une solution ?

Merci d'avance

22 mars 2007, 09:49

Comme les propriétés CSS sont héritées (un élément fils hérite des propriétés définies pour le parent), il faudrait que, pour les "sous-blocs", tu redéfinisses la transparence en mettant une valeur normale.

22 mars 2007, 11:11

Hélas, mon problème est bien que cela ne fonctionne pas

Je peux surcharger et augmenter la transparence des éléments contenus, mais je ne trouve pas comment la réduire. En fait, la valeur de l'opacité est comprise entre 0 et 100%. Le problème c'est qu'apparement le 100% correspond à la valeur de l'opacité précédente dans l'héritage, et que les valeurs supérieure à 100 ne sont pas prises en compte (considérées comme 100%) pour opaquiser un élément transparatisé

En gros, j'arrive à faire de la transparence décroissante, mais impossible de la faire croissante (cad de moins en moins transparent au fur et à mesure de l'imbrication)

Edit : un peu de code pour illustrer :

Code : Tout sélectionner

<style>
div.transON {
  width: 100%; 
  background-color: silver;
  border:1px solid black; 
  text-align:center;

  filter: alpha(opacity=50); 
  -moz-opacity: 0.5;
  opacity:.50;
}
div.transOFF {
  width: 80%; 
  background-color: silver;
  border:1px solid black; 

  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}
</style>

Code : Tout sélectionner

<div class="transOFF">
  blabla <br />
  blabla <br />
</div>

<div class="transON">
  blabla <br />
  blabla <br />

  <div class="transOFF">
    blabla <br />
    blabla <br />
  </div>

  blabla <br />
  blabla <br />
</div>

En fait, j'aimerais que le 3ème div (transOFF) soit de la même couleur/transparence que le premier...

23 mars 2007, 16:23

Victoire !!

En fait, ce très cher IE6 (pas de 7 ni de FF au taf pour tester) réclame un position:relative pour que cela fonctionne......

Edit : ah ben non en fait.... s***** de firefox.... mon problème reste entier pour ce navigateur

23 mars 2007, 21:47

hello,

t'as essayé de cradifier un peu ton code en faisant un bloc conteneur pour tes divs, en sortant le div "opaque" du div "transparent" et en repositionnant en css le "opaque" par dessus le "transparent" ?

c'est pas une solution mais une bidouille cradingue mais si ca peut rendre service

24 mars 2007, 13:17

Hello m'sieur en vadrouille

Yep, j'ai essayé cette solution, mais le problème c'est que je ne connais pas à l'avance la taille de mon div "opaque", et je ne peux pas du coup jouer avec les positions absolues, puisque je ne sais pas quelle hauteur donner au div transparent qui serait en dessous.

J'ai trouvé un script qui permet de gérer la transparence des png pour IE, lorsqu'ils sont utilisés comme background, qui est super, mais qui m'empêche de cliquer dans le div si j'y colle un input. (j'ai pas vraiment regardé, mais j'ai l'impression qu'il transforme le background en image qui se retrouve superposé au div, du coup le tab fonctionne mais pas la souris pour sélectionner un champ)

J'ai fini par craquer pour un hack (!important). Je continue de gérer proprement la transparence avec les filtres pour IE, et pour Mozilla, je colle un png transparent en background que je vire sur IE :

Code : Tout sélectionner

	background-image:url(transp.png) !important;
	background-image:url(none);

FF reconnait la directive !important et ne soucis pas de la suivante, IE ignore la directive et considère la 2nd valeur comme la bonne...

C'est pas super, mais ca m'éviter de devoir coller du js pour faire de la mise en page, alors faute de mieux, je vais rester là dessus

Transparence CSS

Qui est en ligne