Page 1 sur 2

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

Publié : 23 sept. 2007, 10:02
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

Publié : 23 sept. 2007, 18:33
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.

Publié : 23 sept. 2007, 19:21
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

Publié : 23 sept. 2007, 20:21
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

Publié : 23 sept. 2007, 20:33
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

Publié : 23 sept. 2007, 21:42
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

Publié : 23 sept. 2007, 22:18
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

Publié : 24 sept. 2007, 15:56
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

Publié : 24 sept. 2007, 17:26
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

Publié : 24 sept. 2007, 18:42
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.

Publié : 24 sept. 2007, 19:03
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

Publié : 24 sept. 2007, 21:28
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

Publié : 24 sept. 2007, 22:38
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

Publié : 24 sept. 2007, 22:44
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

Publié : 25 sept. 2007, 13:13
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