[HELP] Opacité de background en css

Discussion dans 'Web, design' créé par Bidibule2000, 30 Juin 2006.

Statut de la discussion:
Fermée.
  1. Offline
    Bidibule2000 Elite
    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!!! ;)
    Bidibule2000, 30 Juin 2006
    #1
  2. Offline
    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+
    NoBrain, 3 Juillet 2006
    #2
  3. Offline
    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
    Bidibule2000, 4 Juillet 2006
    #3
  4. Offline
    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 !
    NoBrain, 4 Juillet 2006
    #4
  5. Offline
    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
    Bidibule2000, 4 Juillet 2006
    #5
  6. Offline
    Soulsight Touriste
    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 !!
    Soulsight, 4 Juillet 2006
    #6
Statut de la discussion:
Fermée.