28173 sujets

CSS et mise en forme, CSS3

Opacité sur fond mais pas sur contenu

voila mon problème,
j'ai un tableau avec une image de fond, dans lequel j'ai un autre tableau avec un fond blanc et une opacité de 70%;
dans ce dernier tableau j'ai une phrase, mais malheureusement cette phrase se met aussi en opacité
y a t il un moyen mettre l'opacité sur le fond mais pas sur le texte sans faire d'image??

voici mon code:



<html>
<head>
<title></title>


<style type="text/css">
.fond{
	background:url(chat.jpg);
	width:365px;
	height:241px;
}
.fondopaque{
	background-color:#ffffff;
	filter:alpha(opacity=50);
	-moz-opacity:0.3;
	opacity: 0.3;
}
.textenoir{
	filter:alpha(opacity=100); 
   -moz-opacity:1.0;           
   opacity: 1.0;
}
</style>
</head>

<body>
<table class="fond">
<tr>
<td>
<table class="fondopaque">
  <tr>
    <td class="textenoir">Mon texte qui doit pas etre en opacité mais qui a un fond en opacité</td>
  </tr>
</table>
</td>
</tr>
</table>
</body>
</html>
contrainte: pas d'image de fond surtout!!!
les tableau je sais j'aime pas non plus: contrainte de mon maitre de stage qui m'a poser ce casse tete Smiley cligne
lilou a écrit :
contrainte: pas d'image de fond surtout!!!
les tableau je sais j'aime pas non plus: contrainte de mon maitre de stage qui m'a poser ce casse tete Smiley cligne
Qu'est-ce que c'est que ces contraintes idiotes ? Smiley langue

Tu dois absolument garder la même structure du code html ?
non mais c'est d'office en table et surtout pas avec une image de table.

Si tu as une solution pour le faire sans table donne tjrs

merci
Je pensais qu'on aurait pu tricher en sortant la seconde table de la première et en la positionnant par-dessus en absolu. Ainsi, la 2e ne serait plus un enfant de la la 1ere et ne devrait plus être affectée par l'opacité ...

Je ne sais pas si je me fais bien comprendre Smiley cligne
Si si, un truc dans le genre ?

<html>
  <head>
    <title></title>
    <style type="text/css">
      .fond{
      	background:url(border.gif);
      	width:365px;
      	height:241px;
      }
      .fondopaque{
      	background-color:#ffffff;
      	filter:alpha(opacity=50);
      	-moz-opacity:0.3;
      	opacity: 0.3;
      	width:365px;
      	height:241px;
      }
      div.textenoir{
      	position: absolute;
      	width:365px;
      	height:241px; 
      }
    </style>
  </head>

  <body>
    <div class="textenoir">Mon texte qui doit pas etre en opacité mais qui a un fond en opacité</div>
    <div class="fond">
      <div class="fondopaque">
      </div>
    </div>
  </body>
</html>
(Je suis un peu pas bon en absolute/relative/etc... j'utilise que des float et des margin.. c'est une logique plus "physique" de la chose qui me va bien. .. donc peut être que j'ai mal utilisé le truc là)
Ceci dit tout ca ne présente pas beaucoup d'interet si ? Où veut en venir ton maître de stage ?
C'est bien à ça que je pensais. Mais je ferais plutôt ceci : 
<body>
   <div id="fond">
      <div id="fondOpaque">
      </div>
      <div id="texte">
      Texte non translucide
      </div>
   </div>
</body>
pour pouvoir positionner les éléments facilement par rapport au div #fond : 
#fond {
   position: relative;
   width: 365px;
   height: 241px;
}
#fondOpaque {
   background: #fff;
   /* Réglage(s) de l'opacité */
   }
#texte {
   position: absolute;
   /* Positionnement du texte */
   top: XXXpx;
   left: XXXpx;
}
Rien n'empêche de remplacer les <div> par les <table>, mais ce sera moins élégant Smiley langue

C'est purement un exercice de style ou il y a un but précis derrière la "colle" du maître de stage ?
Modifié par Sopo (30 Nov 2006 - 09:50)
Sujet clos
Aller à