Transparence d'image css

Transparence d'image css - HTML/CSS - Programmation

Marsh Posté le 22-02-2006 à 12:14:58    

Bonjour,
 
encore un projet que j'essaye de mettre en place et qui me pose probleme :D
 
voila, j'ai une premiere page avec un fond d'ecran, donc une jolie photos en background quoi :D
 
j'ai un cadre au bord arrondis tout jolie, mais avec un fond blanc :x
 
j'aimerais superposer mon cadre a l'image, pour que celui ci soit transparente ET que le fond du cadre soit laiteux, pour qu'on vois a travers l'images de fond quoi :D
 
 
et ...... ben j'y arrive po :'(
 
 
 
Je sais que c'est une question de css et de transparent, mais à taton ben je fais choux blanc, et sur le net il fond pas de transparence de deux images l'une sur l'autre :o
 
Enfin bref, une petite explication ou un petit lien serais le bienvenu ;)
 
Un shéma vaut mieux qu'un long discours :
 
http://img158.imageshack.us/img158/8578/test6zf.jpg
 
Voila mon image de fond, c'est les trefles....
 
j'aimerais inserer mon dadre au bord arrondis a fond laiteux TOUT en ayant un aspect de transparence...
 
Et enfin, a l'interieur du cadre je veux pouvoir mettre des liens vers mes contactes
 
 
 
 
merci à ceux qui aurons lu jusqu'ici ;)
 
MATA
 

Reply

Marsh Posté le 22-02-2006 à 12:14:58   

Reply

Marsh Posté le 22-02-2006 à 14:19:43    

Voudrais pas te dire de bétises, mais à mon avis pas possible. Faudrait pouvoir utiliser les transparences PNG 24 bits... qui ne fonctionnent pas sous IE (sans hack).
 
Maintenant tu peux essayer de gruger en "feignant" la transparence. Image sans transparence calée pile poil sur ton background... mais à ce moment là, ta "boite" (DIV) ne pourrait plus s'étirer (image à refaire si la liste de tes contacts s'agrandit).


Message édité par Beral2 le 22-02-2006 à 14:20:16
Reply

Marsh Posté le 22-02-2006 à 14:21:56    

Erf, c'est bien ce que je pensais ...... je vais essayer de feinter en faisant une images photoshop de on site, et d'ensuite incorporer en css, a peux pres au bonne endroit mes textes ( contactes), la seul chose qque je me demande, c'est comment je dois placer mes css, pour que dans n'importe quel cas, mes textes soit au bonnes endroit ?

Reply

Marsh Posté le 22-02-2006 à 14:32:31    

Tu peux faire une DIV en positionnement absolu du type :

Code :
  1. div#contenant_menu
  2. {
  3. position: absolute;
  4. top: 260px;
  5. left: 14px;
  6. width: 105px;
  7. height: 137px;
  8. z-index: 1;
  9.     background: url(chemin/mon_image.png) no-repeat;
  10. }


Puis tu ajoutes ton texte...
 
EDIT : essaie de ne pas mettre CONTACT en image mais en titre/texte (accessibilité).


Message édité par Beral2 le 22-02-2006 à 14:34:05
Reply

Marsh Posté le 22-02-2006 à 19:44:50    

Tu peux peut-être utiliser la propriété opacity : http://www.quirksmode.org/css/opacity.html.
Ce qui est dommage avec cette solution, c'est que la couleur du texte s'en retrouve aussi "blanchie" et c'est pas tip top...
Enfin, à toi de voir ;)

Reply

Marsh Posté le 22-02-2006 à 19:53:42    

Plusieurs solutions:
 
- Soit utiliser l'Alpha-Transparency des PNG (ne fonctionne pas sous IE  :kaola: )
- Soit faire comme Beral2 proposais, faire la transparence sous un logiciel externe et ensuite les agencer de façon à ce que ça ait l'air d'être une vraie transparence. (ne fonctionne que dans le cas d'un gabarit à largeur fixe et ne fonctionne pas sous IE à cause du box-model de MS  :kaola: )
 
exemple -> http://www.meyerweb.com/eric/css/e [...] /demo.html
 
- Soit utiliser la propriété css opacity, mais attention, il faut gérer plusieurs conteneurs avec un z-index différent, sinon tout s'opacifie ! (ah oui encore une chose......ne fonctionne pas sous IE  :kaola: )


Message édité par ANViL le 22-02-2006 à 19:54:32
Reply

Marsh Posté le 23-02-2006 à 12:18:12    

Arg, bon j'ai essayer un peux tout et j'en arrive a la conclusion suivante : mission impossible.
 
Mon image et tout d'abord une image que j'envoie par mail ( les boite mail utilisant le moteur de IE ..... les dernieres solution ne marche pas :'( )
 
Pour le reste mes liens disparaisse a case de la transparence, ca prend meme plus la couleurs du textes qui est pourtant definie en css.
 
....je crois que je vais finter en utilisant une images de fond et en placant mes liens/textes par dessus, en esperant que l'utilisateurs ne reduiras pas sa fenetre :o
 

Reply

Marsh Posté le 23-02-2006 à 12:52:55    

MATAMATA a écrit :

....je crois que je vais finter en utilisant une images de fond et en placant mes liens/textes par dessus, en esperant que l'utilisateurs ne reduiras pas sa fenetre :o


Bah je ne sais pas ce que tu entends par là, mais si tes div sont en pourcentage, ça ne va pas être la merde uniquement si l'utilisateur réduit la page : tout le monde n'a pas la même résolution.

Reply

Marsh Posté le 23-02-2006 à 13:58:49    

Oui oui, c'est bon en fait, j'ai tous fais bien, et ca fais un truc propre ( bien que maintenant j'ai d'autre problemes :'(, qui n'on rien avoir avec la transparence, mais de jemande quand meme)
 
- Le lecteur d'IE me vire les lettres avec accent :/
- certaine boite mails, ne charge pas les images :/
 

Reply

Marsh Posté le 23-02-2006 à 14:05:53    

visiblement y a moyen de le faire : http://www.lafraise.com/t-shirt-16 [...] geant.html faites glisser l'étiquette du prix sur la photo et elle devient transparente...
 
je crois que c'est de l'AJAX


---------------
Des trucs - flickr - Instagram
Reply

Marsh Posté le 23-02-2006 à 14:05:53   

Reply

Marsh Posté le 23-02-2006 à 14:27:39    

de l'AJAX ou la technologie web parts en dot.net ...hum, je verrais pour une beta 2 de mes images dans mes mails, je vais deja essayer de pofiner tout ca , mais je tiendrais l'avencement du projet a jour ici .... si d'ici la y en a qui on des idees :D

Reply

Marsh Posté le 23-02-2006 à 15:09:24    

darxmurf > Il y a bien de l'ajax dans les fonctions javascripts de cette page, mais je vois pas en quoi il faudrait de l'ajax pour faire de la transparence.
 

MATAMATA a écrit :

Oui oui, c'est bon en fait, j'ai tous fais bien, et ca fais un truc propre ( bien que maintenant j'ai d'autre problemes :'(, qui n'on rien avoir avec la transparence, mais de jemande quand meme)
 
- Le lecteur d'IE me vire les lettres avec accent :/
- certaine boite mails, ne charge pas les images :/

Pour les lettres avec accent, mets les sous formes de code html et ca passera mieux. Pour les images, ca dépend du réglage des lecteurs de mails et on ne peut rien faire contre ça à par si on accepte le risque d'être envoyé direct en spam ou à la poubelle du lecteur de mail pour avoir mis les images en fichiers join au mail.

Reply

Marsh Posté le 23-02-2006 à 16:53:47    

darxmurf a écrit :

visiblement y a moyen de le faire : http://www.lafraise.com/t-shirt-16 [...] geant.html faites glisser l'étiquette du prix sur la photo et elle devient transparente...
 
je crois que c'est de l'AJAX


 
Au départ, du moins c'est ce que j'avais compris, le but était de faire la manip' simplement.
Sinon, on peut utiliser des hack IE pour transparence PNG 24 bits tels que celui-là (il y en a d'autres) et ça roule...
 
EN HTML/CSS purs, point de salut.


Message édité par Beral2 le 23-02-2006 à 17:05:03
Reply

Marsh Posté le 24-02-2006 à 11:19:33    

Merci a tous pour vos reponses, personnelement, j'ai abandonner pour mon projet l'idee de transparence mais ca m'interesserais de savoir faire pour plus tard ;)

Reply

Marsh Posté le 26-02-2006 à 02:40:30    

ça marche nickel avec le hack pour iexplore, t'as essayé ?


---------------
Des trucs - flickr - Instagram
Reply

Marsh Posté le 27-02-2006 à 21:54:05    

Merci darxmurf pour l'url, la soluce marche bien sur les tags <img> , les map et meme les images bouton, mais je ne vois nul part mention d'un cas avec une image en background ds une cellule par exemple ....... parceke la biensur il ny a pas de tag <img> donc la class ne s'applique pas ni le div biensur  :cry:  
Quelkun a une solution qui sappplique a ce cas précis :  
 
<td width="18" background="images/block-bordgauche.png"> (par ex) ?
 
Voila je cherche du coté des css aussi mais ca ne marche pas vraiment l'image ne saffiche pas ds IE du tout pour linstant !
 
 
EDIT :
 
Eh bien en fait si ca marche aussi la solution avec les CSS, c simple et tres pratik, mais il fallait penser a mettre les chemins de fichiers en absolu biensur ;)

Message cité 1 fois
Message édité par Elodesign le 27-02-2006 à 22:04:23
Reply

Marsh Posté le 27-02-2006 à 23:05:00    

le CSS c'est bien :D si tu veux mettre ton image en arrière plan tu peux toujours utiliser z-index


Message édité par darxmurf le 27-02-2006 à 23:05:24

---------------
Des trucs - flickr - Instagram
Reply

Marsh Posté le 28-02-2006 à 10:14:19    

Elodesign a écrit :

EDIT :
 
Eh bien en fait si ca marche aussi la solution avec les CSS, c simple et tres pratik, mais il fallait penser a mettre les chemins de fichiers en absolu biensur ;)

plus exactement, quand on met des liens avec des adresses relatives dans un css, les liens sont relatif au dossier contenant le fichier css et pas relatif à la page html.

Reply

Sujets relatifs:

Leave a Replay

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