[Résolu] Couleur de fond de <div> transparente

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

[Résolu] Couleur de fond de <div> transparente

Message par BberXIII81 »

Bonjour,
Est-il possible de déterminer une couleur (blanc léger) pour une <div> qui laisserait transparaitre les dessins du fond du site?
Merci d'avance pour la réponse.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Dernière modification par BberXIII81 le 25 sept. 2007, 13:14, modifié 1 fois.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

C'est relativement compliqué parce qu'il faut en général éviter que le texte devienne transparent aussi, ce qui arrive avec la propriété CSS opacity.

Ce qui se fait souvent c'est d'utiliser une image de fond translucide (au format PNG donc). Celle-ci peut être très petite (1 pixel) et être répétée dans les deux directions.
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

Je te remercie Benoit,
Comment créer cette image? j'ai essayé un damier blanc/transparent de 2px de coté mais c'est pas encore ça. Comment fait tu pour faire ton image d'1px?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

J'ai choisi une opacité de 50% avec le logiciel pixia mais je pense que je l'enregistre pas de la bonne façon en png. Soit tout est transparent soit c'est gris.
Voici les propriété d'enregistrement qui me sont proposé, lesquelles dois je choisir :
- couleur : vrai ou 256
- Filtrage : total ou aucun
- Entrelacé
- Transparent avec choix des différent angles

A moins que quelqu'un puisse me donner cette image,
Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Le logiciel de dessin vectoriel Inkscape gère très bien la tranparence en svg et exporte en png.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
JP
Image
Image
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

Inkscape est un bon logiciel. Je le connais pas très bien mais je ne pense pas qu'il soit bien adapté pour faire des images de 1px.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

BberXIII81 a écrit :Inkscape est un bon logiciel. Je le connais pas très bien mais je ne pense pas qu'il soit bien adapté pour faire des images de 1px.
Justement, si, tu traces un rectangle, tu lui donnes la couleur et la tranparence que tu désires, tu le dimensionnes exactement comme tu veux (0.1px si tu veux) et tu l'exportes en png.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
JP
Image
Image
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

Comment exporter en png? Je ne trouve que exporter en bitmap

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Un dessin en bitmap n'est pas forcément un fichier avec l'extension .bmp, il suffit de donner un nom avec l'extension .png

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
JP
Image
Image
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Il existe un petit module, Conversionsvg, qui complète très bien Inkscape: Il convertit les dessins Svg en .png, .ps, .eps ou .pdf.
Bien qu'en version béta, il fonctionne correctement.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Voici un exemple : une div avec un fond blanc transparent (image png de 1px X 1px) sur une image de fond :

http://ffpic.freezee.org/a/a.html

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
JP
Image
Image
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

Merci à tous, j'ai récupéré l'image du lien de jpbardiau pour faire simple et rapide mais j'essaierais aussi vos autres remarques quand j'en aurais le temps.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

Encore une petite chose,
J'arrive à augmenter l'opacité mais pas à la diminuer au delà de ce qu'elle était à l'origine.
Comment y remédier, merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Refais l'image avec Inkscape en essayant plusieurs niveaux de transparence.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
JP
Image
Image
BberXIII81
Lézard vert
Messages : 190
Inscription : 10 juin 2007, 10:06

Message par BberXIII81 »

D'accord, si y a pas d'autres solutions
Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Win 9x 4.90; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités