html/css : Calque semi transparent possible?

html/css : Calque semi transparent possible? - Web design - Graphisme

Marsh Posté le 05-09-2003 à 17:15:58    

Salut à tous...
 
Voilà. En fait j'ai une base de données avec une chiee d'images...
Ce qu'il y a c'est que je dois afficher du texte dessus en surimpression, ce texte est dynamique.
Il faut que lorsque je clique sur un bouton (la prog on s'en fou je sais la faire) ça mette un calque semi-transparant au dessus de l'image. (ou autres... mais c'est comme ca que je vois la chose)
J'ai déjà vu ça sur un site auparravant mais je ne le retrouve plus.
 
Ce que je fais pour le moment c'est un gif, dont 1 pixel sur 2 est transparant, ca marche mais c'est vraiment pas beau, ca fait du moiré, bref c'est caca :(.
 
Si vous avez une soluce...
 
Merci d'avance ! :)
 
P.S.: j'ai fouillé tout google avec comme mot-clé :
(surimpression css text), j'ai rien trouver de ce que je veux :/


Message édité par _maximus_ le 05-09-2003 à 17:16:37

---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 17:15:58   

Reply

Marsh Posté le 05-09-2003 à 17:20:25    

filter: alpha(opacity=85 , style=0); /* pour IE */
-moz-opacity: .85;  /* pour Mozilla */

Reply

Marsh Posté le 05-09-2003 à 17:23:40    

Reply

Marsh Posté le 05-09-2003 à 17:25:29    


 
http://www.alistapart.com/stories/pngopacity/
ne marche pas chez moi  :??:  
 
bref merci pour ta reponse...
Ton deuxieme poste c une solition avec le png c ca?? mais le png transparent n'est meme pas supporté avec mon explorateur IE5 :(  
J'y avais deja pensé ^^ http://www.antpbe/PNG/
 
Bref je vais essayer ta premiere soluce merci...


---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 17:29:24    

Et bien ca marche... je pensais pas que ca aurait été aussi simple... :) :) :)
 
Un grand merci!!! Tu me sauves...
 :hello:


---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 17:33:08    

_Maximus_ a écrit :

Et bien ca marche... je pensais pas que ca aurait été aussi simple... :) :) :)
 
Un grand merci!!! Tu me sauves...
 :hello:  


 
Enfin si tu regardes avec Opera par exemple, ça ne marchera pas. Ce n'est pas la panacée donc...

Reply

Marsh Posté le 05-09-2003 à 17:34:12    

fastclemmy a écrit :


 
Enfin si tu regardes avec Opera par exemple, ça ne marchera pas. Ce n'est pas la panacée donc...


 
Le client veut ca  [:spamafote]


---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 17:44:25    

Ahem,
 
par contre il me fait un truc assez bizzare, c'est que quand je met le style dans un fichier .css que j'attache a la page, careste opaque... tandis que quand j'implante le style directement dans la page meme, ca marche  :heink:  
 
s'quoi le probleme la?   [:wam]


---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 17:53:20    

Encore mieux :  
 
 


Marche :  
 
<style type="text/css">
<!--
.surimp {
filter: alpha(opacity=65 , style=0);  
}
 
.boite {
 padding: 12px;
 border: solid #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-style: normal;
 font-weight: normal;
 color: #000000;
}
 
.test {
style="BORDER-BOTTOM: #000000 0px;  
BORDER-LEFT: #000000 0px;  
BORDER-RIGHT: #000000 0px;  
BORDER-TOP: #000000 0px;  
HEIGHT: 320px;  
LEFT: 395px;  
OVERFLOW: hidden;  
POSITION: absolute;  
TOP: 50px;  
WIDTH: 360px;  
Z-INDEX: 1;
}
 
 
 
-->
</style>
 
 
Ne marche pas :  
 
<style type="text/css">
<!--
.boite {
 padding: 12px;
 border: solid #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-style: normal;
 font-weight: normal;
 color: #000000;
}
 
.test {
style="BORDER-BOTTOM: #000000 0px;  
BORDER-LEFT: #000000 0px;  
BORDER-RIGHT: #000000 0px;  
BORDER-TOP: #000000 0px;  
HEIGHT: 320px;  
LEFT: 395px;  
OVERFLOW: hidden;  
POSITION: absolute;  
TOP: 50px;  
WIDTH: 360px;  
Z-INDEX: 1;
}
 
.surimp {
filter: alpha(opacity=65 , style=0);  
}
 
-->
</style>


 
 :whistle: Les mystères d'IE....


---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 17:57:14    

C'est peut-être le style=0 qui fout la merde mets simplement
filter: alpha(opacity=65);

Reply

Marsh Posté le 05-09-2003 à 17:57:14   

Reply

Marsh Posté le 05-09-2003 à 18:05:35    

fastclemmy a écrit :

C'est peut-être le style=0 qui fout la merde mets simplement
filter: alpha(opacity=65);  


 
Non, ca change rien, mais c'est pas grave, j'le laisse en premier et ca marche...


---------------
Ptit con de goret je t'emmerde ^_^
Reply

Marsh Posté le 05-09-2003 à 20:59:32    

C'est parce que tu as fais ton style avec les genoux...
 
un indice: style="


Message édité par gizmo le 05-09-2003 à 20:59:48
Reply

Marsh Posté le 06-09-2003 à 00:15:31    

gizmo a écrit :

C'est parce que tu as fais ton style avec les genoux...
 
un indice: style="


 [:splinter]  [:forummp3]  
 
 :D


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 11-09-2003 à 12:09:46    

à peu près la même question pour savoir :  
 
je veux mettre le background-color de mon div en opacité 65% mais que le texte qu'il contient lui reste en 100%
 
comment je peux faire ??
 
j'ai ça actuellement :  
.l-pub-ann {text-decoration: none; color: #00F; filter: alpha(opacity=100 , style=0);}
.l-pub-ann:hover {text-decoration: underline; filter: alpha(opacity=100 , style=0);}
.div-annu {width: 95%; height: 20px; text-align: center; border: 1px solid #000; background: #000; border: 1px solid #FFF; padding-top: 1px;}
 
et
<div class="div-annu" style="filter: alpha(opacity=65 , style=0);"><a href="url/annuaire/annuaire.php" class="l-pub-ann">Annuaire Professionnel</a></div>

Reply

Marsh Posté le 11-09-2003 à 13:00:54    

je c pas pour le coup du filtre mozilla, mais sinon, ca, ca devrait marcher:
 
http://forum.hardware.fr/forum2.ph [...] subcat=402
 
enfin, c'est comme ca que je fais moi :)
 
Edit: enfin, la plus precisement:
http://forum.hardware.fr/forum2.ph [...] 02#t322188


Message édité par lennelei le 11-09-2003 à 13:02:25
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed