[HELP] Opacité de background en css

Statut
N'est pas ouverte pour d'autres réponses.
Salut à tous!!

Voilà j'ai une question concernant un petit problème que je remarque.

J'explique :

J'ai un tableau avec une image en background, dans ce tableau, j'ai plusieurs lignes et cellules et j'aimerais leur donner un petit effet d'opacité dans la couleur de fond de la cellule.

J'y arrive sans problème mais l'opacité de mon texte qui est dans la cellule varie aussi ce qui est plus génant.

Voici ma propriété css pour la cellule :

.bgHeaderTopLeft{
background-color: #557a55;
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50)}

ma propriété pour le texte est bêtement un font-family: ....; color: ...

Quelqu'un a une idée pour faire en sorte que le texte ne subisse pas l'effet d'opacité prévu sur la cellule ??

Merci d'avance!!! ;)
 

NoBrain

Touriste
mets ta portion de texte dans un <span:colere:/span> avec comme style : position: relative;

Ca marche sous ie, pas sous firefox :pfiou:
J'aisserai de trouver mieux quand j'aurai plus de temps.

a+
 
1er
OP
Bidibule2000

Bidibule2000

Elite
Merci pour ce petit truc que j'avais trouvé hier...:p

Effectivement ça marche sous IE mais pas sous Firefox..Enfin c'est déjà ça! :-D

Le position: relative fait en sorte que le texte encapsulé par les tags n'hérite pas des propriétés de la cellule. sous IE....

Si tu vois la soluce n'hésite pas car je tourne en rond là...

Merci
 

NoBrain

Touriste
Bon ben j'ai trouvé un truc, mais c'est hyper lourd et pas très souple.

Crées deux tables identiques en tout point au niveau de tes dimensions.
L'une avec tes background transparent dans tes cellules et l'autre avec
uniquement les textes (stylé ou pas).

Ensuite, englobe chaque table dans un <div> avec un id pour chacun.

genre :

(pour les background)
#layer1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

(pour les textes)
#layer2 {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}

Grâce à l'attribut z-index, ça va le faire. Tu places ensuite tes tables où tu veux avec top: 0px; et left: 0px; (entre autres)

Bon heu :pfiou: c'est un peu gras je l'avoue, mais je n'ai rien trouvé d'autres

Si tu veux un source complet, demande moi.

Bonne chance pour la suite !
 
1er
OP
Bidibule2000

Bidibule2000

Elite
Mouais c'est vrai que c'est assez lourd donc je vais rester sur le position:relative et je taperai l'opacité à 75% en attendant...

On verra si je change après!

Meric et si tu as encore des idées je suis toute ouïe
 

Soulsight

Elite
hmm

moi je testerai 2 choses :

1 )

un sélecteur de classe ( les tableaux ne prennent pas bien en compte les styles définit et bug souvent avec les inherit etc ... )

.bgHeaderTopLeft
{
background-color: #557a55;
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50)
}

ca tu laisses et ce que tu fais c'est :

.bgHeaderTopLeft span
{
background-color: #557a55;
-moz-opacity: 1;
opacity: 1;
filter:alpha(opacity=100)
}

donc les spans dans les éléments avec la classe .bgHeaderTopLeft prendront ce style

J'émet un doute sur le bon fonctionnement, à tester donc !

2 ) tu définis DIRECTEMENT le style sur le span de ton texte, j'ai déjà rencontré le cas d'un span intérieur qui prennait pas la classe qui lui été assignée correctement

donc
<td class="bgHeaderTopLeft":colere:span style="background-color: #557a55; -moz-opacity: 1; opacity: 1; filter:alpha(opacity=100);">ton texte </span:colere:/td>

je pense que ca devrai marcher

A noter qu'une la position relative n'a rien avoir avec les propriétés inherit. C'est juste le bloc qui suit correctement le flux du document. Les autres propriétés ne suivent pas !!!

Sinon j'ai trouvé ceci :

http://www.mandarindesign.com/opacity.html

et je pense que ca illustre ton cas en fait !!
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut