18073 sujets

Questions générales et questions de débutants

[Résolu] Opacité

Bonjour,

J'ai un site web, avec un bloc parent qui a une opacité de 90%, mon souci est que dans ce bloc se trouve des images et que j'aimerais qu'elles aient une opacité de 100%, mais honnêtement après pleins de tests, j'y suis incapable d'y arriver...

Le code de la page :

<div id="droite">

<img src="images/photos/lionel_walter.jpg" title="Lionel Walter" alt="Lionel Walter" />

<img src="images/photos/lutfey_kaya.jpg" title="Lutfey Kaya" alt="Lutfey Kaya" />

</div>


Le css du div :

#droite {
position: relative;
margin-top: 10px;
padding: 10px;
background: #fff;
opacity: .9;
width: 600px;
float: left;
}


J'ai essayé en mettant un span, une class sur les images en mettant une opacité normal, mais rien n'y fait... Si vous aviez des idées, ça serait sympa. Merci!

Ah et la page en question

Voilà, merci de votre aide... ++
Modifié par le rouge (17 Sep 2007 - 17:13)
le rouge a écrit :
J'ai un site web, avec un bloc parent qui a une opacité de 90%, mon souci est que dans ce bloc se trouve des images et que j'aimerais qu'elles aient une opacité de 100%, mais honnêtement après pleins de tests, j'y suis incapable d'y arriver...

Ton image ou span ou autre peut bien avoir une opacité de 100%, ça n'empêchera pas l'ensemble du bloc d'avoir une opacité de 90%. Il n'y a pas de moyen pour «rétablir» l'opacité comme tu souhaites le faire.

Solution: ne pas donner une opacité de 90% à ton bloc parent. En général, on n'en a d'ailleurs pas besoin, surtout si on cherchait juste à avoir une image ou couleur de fond translucide.
On utilisera donc probablement des images de fond en PNG-24.
le rouge a écrit :
Merci, j'avais totalement oublié les PNG... ça fonctionne.

Avec un bémol tout de même: en cas de désactivation ou de non chargement des images, on peut se retrouver avec une combinaison couleur de fond/couleur de texte illisible. L'utilisation d'opacity n'a pas se défaut.

La solution idéale serait l'utilisation des couleurs CSS RVBA (RVB avec couche alpha). CSS3 (dans l'état actuel de la spécification...) propose la syntaxe suivante pour une couleur de fond blanche opaque à 90%: 
background-color: rgba(255,255,255,0.9)

Source: http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color

Vu que le «Color Module» de CSS3 a le statut de «Candidate Recommendation» (comme CSS 2.1 depuis... cet été!), on peut raisonnablement supposer que ça ne bougera pas. Restent donc les implémentations.

Au sujet du support des couleurs RVBA, voir ici:
http://web.covertprestige.info/test/28-support-couleurs-rvba-css3.html
Sujet clos
Aller à