Opacity

salut,
Je veux donner un peu de transparence à un background,
mais quand j'utilise la fonction : opacity:0.5, (par exmple) ça s'applique sur le background et aussi sur le texte , et je ne veux pas appliquer le background sur texte



#element {background:#5e2671; opacity:0.7; }

Help SVP

Salut,

Effectivement, la propriété CSS 3 opacity s'applique à l'arrière-plan et au texte. Pour n'agir que sur la couleur d'arrière-plan, il faut utiliser la fonction rgba () ou hsla () comme valeur de la propriété background-color. S'il s'agit de rendre l'image d'arrière-plan semi-transparente, c'est l'image qu'il faut travailler.

Si modifier l'image n'est pas envisageable ou pratique, on peut:
- utiliser un élément IMG dans le code HTML;
- ou bien un pseudo-élément (avec :before ou :after).
Dans les deux cas on utilisera le positionnement absolu (pour l'image, pas pour le contenu). Ça marche assez bien pour des illustrations (petit exemple perso sur covertprestige.net), par contre ça ne sera pas adapté à des motifs répétés.

@Victor BRITO : merci beacoup ça marche super

C'est compatible avec tous les navigateurs ?

multras a écrit :
C'est compatible avec tous les navigateurs ?

Ça dépend de quoi tu parles.
- Couleurs RGBA en CSS: dans tous les navigateurs sauf IE 7-8 (ok à partir d'IE 9). Pour info: http://caniuse.com/css3-colors
- Images translucide en PNG-32 (attention, ça peut être lourd) ou PNG-8 avec alpha (images à produire avec Fireworks ou ImageAlpha): tous navigateurs dont IE 7, pas compatible IE 6 mais on s'en fiche hein.
Modifié par fvsch (18 Oct 2011 - 18:19)

#element p {opacity : 1}

Encore faut-il mettre sont texte dans p

Ehplod a écrit :
#element p {opacity : 1}

Encore faut-il mettre sont texte dans p

Attention ! de mémoire, la propriété opacity agit aussi sur les éléments enfants.

Ehplod a écrit :
#element p {opacity : 1}
Encore faut-il mettre sont texte dans p

Si tu as défini une opacité partielle sur un élément, tous les éléments qu'il contient ont déjà une opacité de 1 (100%) par défaut. Pas la peine de la déclarer à nouveau.

Et oui, malgré cette opacité par défaut à 1, les éléments apparaissent translucides car... leur parent a une opacité partielle.

En HTML et CSS un élément ce n'est pas juste des bordures, une couleur ou image de fond, et les quelques noeuds texte qui appartiennent directement à l'élément. Un élément c'est l'élément lui-même et tout ce qu'il contient. Le navigateur peint l'élément (donc avec son contenu) et applique une opacité partielle à l'ensemble. C'est très logique.

Ok,

Donc, faut faire
#element1 {background:#aaa... opacity: 0.7}
#élément2 p {les attributs pour le placer au dessus du précédent}

non ?

J'ai envie de dire que oui, peut-être, mais ça dépend du design.
(En général s'il y a un élément à positionner en absolu ça sera plutôt celui qui affiche le fond translucide, pas celui avec le contenu.)