Opacity dans les div

Bonjour,

J'imbrique deux div, un avec une image de fond, un second avec une couleur de fond dont je veux faire varier la transparence avec la balise opacity.
Petit soucis, le texte est lui aussi sensible à opacity et devient moins lisible.
Quelqu'un a-t-il une petite astuce pour contourner ce petit désagrément ?
Voici mon code

<div style="float:left;width:200px;height:225px;background-image: url(5.jpg);margin-left:15px;margin-right:15px;"> 
  <div style="padding:5px; margin-left: 10px; margin-top: 10px; width: 170px; height: 195px; background-color: #ffffff;opacity: 0,75;filter: alpha(opacity=75); "> 
    Le Lorem Ipsum est simplement du faux texte employé dans la composition et 
    la mise en page avant impression. Le Lorem Ipsum est le faux texte standard 
    de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla 
    ensemble des morceaux de texte pour réaliser un livre spécimen de polices 
    de texte.</div>
</div>

gsp a écrit :
Petit soucis, le texte est lui aussi sensible à opacity

C'est parfaitement logique: l'opacité s'applique à l'élément tout entier (fond, bordures, contenus).

gsp a écrit :
Quelqu'un a-t-il une petite astuce pour contourner ce petit désagrément ?

Astuce toute simple: ne pas utiliser opacity quand ce qu'on veut faire n'a rien à voir avec l'utilisation d'opacity.

Pour une couleur de fond translucide, les deux principales options sont:
1. utiliser background-color et une couleur RGBA;
2. utiliser background-image et une image translucide en PNG-32.

La première option est la plus souple, mais ne sera compatible avec IE qu'à partir de la version 9 (sortie début 2011, à priori).
La deuxième option est moins souple, mais est compatible à partir de IE7.

Bonne continuation.

Florent V. a écrit :

utiliser background-image et une image translucide en PNG-32.

Merci pour cette piste, cela veut-il dire qu'il n'est pas utile d'utiliser opacity mais plutôt de jouer sur la transparente de l'image ?

Cordialement
Modifié par Florent V. (11 May 2010 - 21:59)

Ça veut dire qu'utiliser opacity pour l'effet que tu souhaites (un fond translucide) n'est pas la bonne solution. C'est un peu comme utiliser une image de fond (background-image) pour dessiner une simple bordure: utiliser border est plus adapté.

Vu que tu souhaites un fond uni translucide, la solution idéale est d'utiliser background-color avec une couleur RGBA. Par exemple:

#test {
  background: rgba(255,0,0,.5); /* Rouge opaque à 50% */
}

Comme les couleurs RGBA ne sont pas supportées par IE7 et IE8, on peut se rabattre sur une solution proche: utiliser une image ayant pour contenu la couleur souhaitée avec le bon niveau d'opacité. Les formats possibles sont le PNG-32 (non indexé, couleurs avec couche alpha) ou le PNG-8 (indexé, possibilité d'utiliser des couleurs translucides avec certains rares logiciels, notamment Fireworks sur Win/Mac ou ImageAlpha sur Mac).