Sujets similaires

Sujet: Opacité image pa Dim 28 Mar 2010, 14:07

Bonjour!
J'aimerais mettre une image de fond opaque mais pas les textes et images dessus :s
Comment faire?
Merci d'avance

Sujet: Re: Opacité image pa Dim 28 Mar 2010, 14:52

Tu crées une classe exemple

Code:: .opapa{opacity:0.6}

Tu règles le chiffre selon ce que tu veux en étant 1 au nombre total et plus tu diminue le chiffre plus cela viens claire.

Et si tu veux qu'au survole elle devient plus claire tu fait la même chose mais en rajoutant Hover

Code:: .opapa:hover{opacity:0.9}

Ensuite tu as seulement a posté ta PA en inscrivant devant ton image

Code:: <opapa>[img][/img]</opapap>

Si j'ai bien compris je crois avoir répondu à ta question

Sujet: Re: Opacité image pa Dim 28 Mar 2010, 15:27

Bonsoir,

Euh Emaline, je ne crois pas que c'est ce que demande Emy, même assez à côté... :?
Elle ne parle pas d'hover et la balise HTML < opapa>, si ça passe avec un ou deux navigateurs c'est une chance qui risque de tourner une fois que les navs se standardiseront, parce que ce n'est pas du HTML.
Si tu crées un class, autant le reprendre dans de vraies balises HTML comme table, td, div, span, etc...

Donc si j'ai bien compris Emy, tu veux garder une image de fond sans transparence et mettre de la transparence sur le contenu.
Comme cet exemple :

Contenu mis en transparence
devant le fond opaque.

(je me demande d'ailleurs si ce n'est pas plutôt l'inverse que tu voudrais ? Si c'est le cas, tu inverses le class de div)

Voici les codes utilisés pour cet exemple-ci :
Dans le PA >> Affichage >> Couleurs > Feuille de style CSS, on crée un intitulé pour l'attribut "class" comme l'a dit Emy :

Citation :: .opapa {opacity: 0.9;}
.opapa:hover {opacity: 1;}

En HTML :

Code:: <div style="background: transparent url('url_image_fond') no-repeat top center; width: ???px; height: ???px;"><div class="opapa" align="center">
Contenu mis en transparence
devant le fond opaque.
<img src="url_image" />
</div></div>

Donc tu peux voir qu'il y a la div avec son image de fond qui est opaque, la div qu'elle contient dont le contenu sera transparent.

Sujet: Re: Opacité image pa Dim 28 Mar 2010, 17:54

Bonjour!
Oui Final-Blond , c'est ça que je voulais dire (hé oui le contraire, le fond transparent désolée)
Mais ca ne marche pas confused

Je suis trop nule x)
Voila mon html :

Code:: <TABLE width="100%" div style="background: transparent url('http://img7.hostingpics.net/pics/410443parateeeeeeeeeeeeee.png') no-repeat top center; width: 853px; height: 335px; class="opapa" align="center"><TBODY><TR><TD style="BORDER-BOTTOM: #7777ff 1px dashed; TEXT-ALIGN: center; BORDER-RIGHT: #7777ff 1px dashed" width="25%"><div style="filter:alpha(opacity=100)">
<H1><STRIKE></STRIKE>Clic</H1><BR><A class=imginfo><STRONG class=principal>TopSites</STRONG> <SPAN>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/stupidlamb/in.php?ID=559" target=_blank>Top1</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/rpgtwilight/in.php?ID=329" target=_blank>Top2</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/blueye/in.php?ID=2048" target=_blank>Top3</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/obsession27/in.php?ID=13971" target=_blank>Top4</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/abysses/in.php?ID=3234" target=_blank>Top5</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/forumrpg/in.php?ID=4446" target=_blank>Top6</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/dolceleb/in.php?IDmark=824" target=_blank>Top7</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/oliviahobson/in.php?ID=15" target=_blank>Top8</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://www.root-top.com/topsite/candymiam/in.php?ID=4910" target=_blank>Top9</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></A><BR><A class=imginfo><STRONG class=principal>Groupes</STRONG> <SPAN>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/humains-t8.htm">Humains</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/vampires-t7.htm">Vampires</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/modificateurs-t5.htm">Modificateurs</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/loup-garous-t16.htm">Loup-garous</A><BR></FONT></TD></TR><BR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/les-hybrides-t37.htm">Hybrides</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/murony-t9.htm">Muronys</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/groupes-f65/esprits-guerriers-t6.htm">Esprits guerriers</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></A><BR><A class=imginfo><STRONG class=principal>Importants</STRONG> <SPAN>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/rules-context-groupes-f1/reglement-t2.htm">Rules!</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/rules-context-groupes-f1/contexte-du-forum-important-t3.htm">Context!</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/requetesquestions-f7/questions-ouverts-a-tous-t23.htm">Questions?</A><BR></FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://unreal.vampire-legend.net/posts-vacants-f3/">Pv</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></A></TD><TD style="BORDER-BOTTOM: #7766ff 1px dashed; BORDER-RIGHT: #7766ff 1px dashed" width="75%" colSpan=3><div style="overflow: auto; border: 1px solid; -moz-border-radius: 10px; padding: 3px;">
<H1><STRIKE></STRIKE>Le Forum Unreal....</H1>
<p><BR><BR><STRIKE></STRIKE> <FONT face="Century Gothic"><STRONG><EM>V</EM></STRONG><U><FONT color=black>ampires</U></FONT>:</FONT> <FONT color=#00cc33>Open</FONT> <STRIKE></STRIKE> <FONT face="Century Gothic"><STRONG><EM>M</EM></STRONG><U><FONT color=black>odificateurs:</U></FONT></FONT> <FONT color=#00cc33>Open</FONT> <STRIKE></STRIKE> <FONT face="Century Gothic"><EM><STRONG>H</STRONG></EM><U><FONT color=black>umains</FONT>:</U></FONT> <FONT color=#00cc33>Open</FONT> <STRIKE></STRIKE> <FONT face="Century Gothic"><EM><STRONG>H</STRONG></EM><U><FONT color=black>ybrides</FONT>:</U></FONT> <FONT color=#00cc33>Open</FONT> <STRIKE></STRIKE> <FONT face="Century Gothic"><EM><STRONG>L</STRONG></EM><U><FONT color=black>oup-garous</FONT>:</U></FONT> <FONT color=#00cc33>Open</FONT> </p>
<p><STRIKE></STRIKE> <FONT face="Century Gothic"><EM><STRONG>M</STRONG></EM><U><FONT color=black>urony</FONT>:</U></FONT> <FONT color=#00cc33>Open</FONT> <STRIKE></STRIKE> <FONT face="Century Gothic"><EM><STRONG>E</STRONG></EM><U><FONT color=black>sprits-guerriers</FONT>:</U></FONT> <FONT color=darkorange>PV Only</FONT><BR><BR>Posts Vacants à prendre en priorité! | N'oubliez pas d'aller voir le context | Double compte Autorisé <BR>Forum favorisé pour Firefox&Safari | Tous ces groupes sonnent chinois(ou Japonais?)? Lisez les <A href="http://unreal.vampire-legend.net/groupes-f65/">Groupes</A> | Les <A href="http://unreal.vampire-legend.net/annonces-f6/">Annonces</A> <BR></p><DIV style="TEXT-ALIGN: right">Vos admins</DIV></div></TD></TR><TR>
<TD style="BORDER-BOTTOM: #7766ff 1px dashed; TEXT-ALIGN: center; BORDER-RIGHT: #7766ff 1px dashed" width="25%">
<H2>Wanted</H2><A href="http://unreal.vampire-legend.net/vampires-f66/clan-d-olympic-7-7-t11.htm"><IMG src="http://i12.servimg.com/u/f12/14/52/06/76/edward10.jpg"></A><A href="http://unreal.vampire-legend.net/modificateurs-f67/quileutes-8-8-t17.htm#48"><IMG src="http://i12.servimg.com/u/f12/14/52/06/76/jake10.png"></A><A href="http://unreal.vampire-legend.net/vampires-f66/clan-d-olympic-7-7-t11.htm"><IMG src="http://i12.servimg.com/u/f12/14/52/06/76/alice10.jpg"></A><A href="http://unreal.vampire-legend.net/vampires-f66/clan-d-olympic-7-7-t11.htm"><IMG src="http://i12.servimg.com/u/f12/14/52/06/76/carlis10.jpg"></A> <BR><A href="http://unreal.vampire-legend.net/vampires-f66/famille-royale-des-vampires-volturi-15-15-t13.htm"><IMG src="http://img7.hostingpics.net/thumbs/mini_884679wantedAro.jpg"></A> <A href="http://unreal.vampire-legend.net/vampires-f66/vampires-nomades-4-4-t14.htm"><IMG src="http://img7.hostingpics.net/thumbs/mini_11110WantedJames.png"></A> <A href="http://unreal.vampire-legend.net/vampires-f66/clan-denali-4-5-t15.htm"><IMG src="http://img7.hostingpics.net/thumbs/mini_757250WantedTanya.jpg"></A> <A href="http://unreal.vampire-legend.net/vampires-f66/clan-d-olympic-7-7-t11.htm"><IMG src="http://i12.servimg.com/u/f12/14/52/06/76/jasper11.jpg"></A></TD>
<TD style="BORDER-BOTTOM: #7766ff 1px dashed; BORDER-RIGHT: #7766ff 1px dashed" width="25%">
<H2>Top-copains</H2>
<p><a target="_blank" href="http://zestedecouleurs.forumsactifs.net" title="Hébergement photos"><img src="http://img7.hostingpics.net/pics/34345Zeste.jpg" border="0" /></a> <A class=postlink href="http://unreal.vampire-legend.net/partenariat-f74/demandes-de-partenariat-c-est-ici-t24.htm" target=_blank><IMG border=0 alt="" src="http://i67.servimg.com/u/f67/13/67/50/17/youpar10.jpg"></A> <A class=postlink href="http://unreal.vampire-legend.net/partenariat-f74/demandes-de-partenariat-c-est-ici-t24.htm" target=_blank><IMG border=0 alt="" src="http://i67.servimg.com/u/f67/13/67/50/17/youpar10.jpg"></A></p>
<p><A class=postlink href="http://unreal.vampire-legend.net/partenaires-acceptes-f77/?sid=0fcc767e6a2a10229241384bbc1bca81">Autres Partenaires!</A><A href="http://unreal.vampire-legend.net/partenaires-acceptes-f77/?sid=0fcc767e6a2a10229241384bbc1bca81"></A></p></TD>
<TD style="BORDER-BOTTOM: #7766ff 1px dashed; BORDER-RIGHT: #7766ff 1px dashed" width="25%">
<H2>Le Staff</H2><A class=infobulle href="http://unreal.vampire-legend.net/profile.forum?mode=viewprofile&u=1"><IMG src="http://img7.hostingpics.net/pics/900042MeStafPa.jpg"> <SPAN>Emylia Livingston<BR>Son profil<BR>Fondatrice & Admin<BR><IMG src="http://img7.hostingpics.net/pics/563806so10.gif"></SPAN></A> <A class=infobulle href="http://unreal.vampire-legend.net/profile.forum?mode=viewprofile&u=2"><IMG src="http://img7.hostingpics.net/pics/710310ElStafPa.jpg"> <SPAN>Elyana Garner<BR>Son profil<BR>Co-fondatrice & Admin<BR><IMG src="http://i28.tinypic.com/2r5b9jr.gif"></SPAN></A> </TD>
<TD style="TEXT-ALIGN: center" width="25%">
<H3>Link Us</H3><DIV align=center></DIV><DIV align=center><A class=postlink href="http://unreal.vampire-legend.net/"><IMG border=0 alt="" src="http://i17.servimg.com/u/f17/13/67/50/17/liensu10.gif"></A><A class=postlink href="http://unreal.vampire-legend.net/"><IMG border=0 alt="" src="http://i17.servimg.com/u/f17/13/67/50/17/linkus10.gif"></A><A class=postlink href="http://unreal.vampire-legend.net/"><IMG border=0 alt="" src="http://i17.servimg.com/u/f17/13/67/50/17/likeus12.gif"></A>   </DIV></div></TD></TR></TBODY></TABLE>
</div></div>

et pour la css c'est pareil j'ai juste ajouter ce que tu m'avais dit ... :s
J'ai du rater quelque chose dans l'html (et je m'excuses de la longueur d'ailleurs) car rien n'est transparent.

Merci d'avance Smile

Sujet: Re: Opacité image pa Lun 29 Mar 2010, 00:27

Hiiiiiiiiiiiiii ! affraid

Je ne vais pas plus loin dans ton tableau que la première balise "table", celle qui comprend l'image de fond et une grosse erreur avec "div" dedans :

Code:: <table width="100%" style="background: transparent url('http://img7.hostingpics.net/pics/410443parateeeeeeeeeeeeee.png') no-repeat top center; width: 853px; height: 335px; class="opapa" align="center">

Vérifie bien le reste, mais j'ai le HTML (et le CSS) avec des majuscules en horreur.

Essaie aussi de diminuer l'opacité dans le CSS, parce que là je t'avais donné l'exemple avec une faible transparence pour qu'on puisse voir le contenu transparent.

Sinon, tu as bien mis le "class" où il le fallait. Wink

Sujet: Re: Opacité image pa Lun 29 Mar 2010, 17:13

Merci beaucoup Smile

Sujet: Re: Opacité image pa Lun 29 Mar 2010, 18:24

Bonjour ^^

Le problème est résolu ?

Sujet: Re: Opacité image pa Mar 30 Mar 2010, 13:43

Oui , merci ^^ (BOulet! J'avais oublier de mettre le "résolu" xD)

Opacité image pa

Opacité image pa

Sujets similaires

Sujets similaires

Partenaires Or