Transparence

Bonjour à toutes et à tous,

Je n'ai pas trouvé d'article avec Google : est-ce possible ?

Je voudrais avoir un effet de transparence sur un fond de page html
entre une texture et une couleur. Je m'explique :

J'ai une texture qui représente du métal brossé par exemple ; cette
texture est de couleur grise. J'introduis dans ma page html (je ne sais
pas comment ni où) une couleur, bleu par exemple. Je voudrais voir ma
texture bleutée.

Est-ce possible ? et si oui, comment fait-on ?

Merci de votre aide.

Pierre.

Pierre a écrit :

Bonjour à toutes et à tous,

Je n'ai pas trouvé d'article avec Google : est-ce possible ?

Je voudrais avoir un effet de transparence sur un fond de page html
entre une texture et une couleur. Je m'explique :

J'ai une texture qui représente du métal brossé par exemple ; cette
texture est de couleur grise. J'introduis dans ma page html (je ne sais
pas comment ni où) une couleur, bleu par exemple. Je voudrais voir ma
texture bleutée.

Est-ce possible ? et si oui, comment fait-on ?

Le plus simple est peut-être encore d'utilisé un logiciel de traitement
d'image, par exemple Le GIMP. Tu ouvres ton image, tu fais dialogues >
calques, tu diminues l'opacité de ton calque, et tu en place un autre
derrière de la couleur que tu veux.

Sinon pour quelque chose de plus modulaire, pour mettre différentes
couleurs en fond selon les pages, tu diminues simplement l'opacité de
ton image et tu l'enregistre en PNG qui est le seul format à gérer la
transparence. Sur ta page tu n'as qu'à mettre deux blocs les uns sur les
autres, celui de derrière de la couleur que tu veux, et ta texture en
fond de celui de devant.
Attention, fonctionne avec tous les navigateurs sauf IE :-\

Finalement, tu peux prendre ta texture, et la mettre dans un bloc auquel
tu appliques la propriété css3 opacity. Attention, qui dit CSS3 dit
évidemment que ça ne fonctionnera pas dans IE.

À toi de voir quelle technique tu préfère, la dernière est la plus
simple mais probablement la moins supportée ;-)

Xavier

Xavier Robin a écrit :

Pierre a écrit :
Bonjour à toutes et à tous,

Je n'ai pas trouvé d'article avec Google : est-ce possible ?

Je voudrais avoir un effet de transparence sur un fond de page html
entre une texture et une couleur. Je m'explique :

J'ai une texture qui représente du métal brossé par exemple ; cette
texture est de couleur grise. J'introduis dans ma page html (je ne sais
pas comment ni où) une couleur, bleu par exemple. Je voudrais voir ma
texture bleutée.

Est-ce possible ? et si oui, comment fait-on ?

Le plus simple est peut-être encore d'utilisé un logiciel de traitement
d'image, par exemple Le GIMP. Tu ouvres ton image, tu fais dialogues
calques, tu diminues l'opacité de ton calque, et tu en place un autre
derrière de la couleur que tu veux.

Sinon pour quelque chose de plus modulaire, pour mettre différentes
couleurs en fond selon les pages, tu diminues simplement l'opacité de
ton image et tu l'enregistre en PNG qui est le seul format à gérer la
transparence. Sur ta page tu n'as qu'à mettre deux blocs les uns sur les
autres, celui de derrière de la couleur que tu veux, et ta texture en
fond de celui de devant.

Je te remercie Xavier pour les solutions que tu me proposes.

Pour cette deuxième solution, peux-tu me préciser avec quel logiciel on
peut modifier l'opacité d'une image et en quoi consiste les deux blocs
les uns sur les autres : traduction en HTML.

Merci de ton aide.

Pierre

Attention, fonctionne avec tous les navigateurs sauf IE :-\

Finalement, tu peux prendre ta texture, et la mettre dans un bloc auquel
tu appliques la propriété css3 opacity. Attention, qui dit CSS3 dit
évidemment que ça ne fonctionnera pas dans IE.

À toi de voir quelle technique tu préfère, la dernière est la plus
simple mais probablement la moins supportée ;-)

Xavier

Pierre a écrit :

Pour cette deuxième solution, peux-tu me préciser avec quel logiciel on
peut modifier l'opacité d'une image

Avec n'importe quel logiciel de manipulation d'image. Par exemple The
GIMP qui est libre et disponible pour plus ou moins toutes les plate-formes.

et en quoi consiste les deux blocs
les uns sur les autres : traduction en HTML.

Ben simplement que l'un est par-dessus l'autre... empilés si l'on veut.
Qu'est-ce qui te gène dans cette "définition" ?

Xavier

Xavier Robin a écrit :

Pierre a écrit :
Pour cette deuxième solution, peux-tu me préciser avec quel logiciel on
peut modifier l'opacité d'une image

Avec n'importe quel logiciel de manipulation d'image. Par exemple The
GIMP qui est libre et disponible pour plus ou moins toutes les plate-formes.

et en quoi consiste les deux blocs
les uns sur les autres : traduction en HTML.

Ben simplement que l'un est par-dessus l'autre... empilés si l'on veut.
Qu'est-ce qui te gène dans cette "définition" ?

Je comprends la définition. C'est sa concrétisation en langage HTML que
je ne vois vraiment pas. Quelles sont les lignes de HTML qu'il faut
écrire pour avoir deux blocs l'un sur l'autre ? Un exemple dispo ?

Cordialement.

Pierre.

Xavier

Pierre a écrit :

Je comprends la définition. C'est sa concrétisation en langage HTML que
je ne vois vraiment pas. Quelles sont les lignes de HTML qu'il faut
écrire pour avoir deux blocs l'un sur l'autre ? Un exemple dispo ?

Je vois. Mais quand tu mets un paragraphe dans une page, il est
au-dessus du <body> par exemple. C'est aussi simple que ça ;-)

Donc si tu mets ton motif semi-transparent sur un body de fond bleu, tu
verra ce que tu voulais au départ («effet de transparence entre une
texture et une couleur»).

Ensuite tu t'arranges comme tu veux pour mettre ton motif localement ou
sur toute la page, là c'est toi le seul maître ;-)

Xavier

Xavier Robin a écrit :

Pierre a écrit :
Je comprends la définition. C'est sa concrétisation en langage HTML que
je ne vois vraiment pas. Quelles sont les lignes de HTML qu'il faut
écrire pour avoir deux blocs l'un sur l'autre ? Un exemple dispo ?

Je vois. Mais quand tu mets un paragraphe dans une page, il est
au-dessus du <body> par exemple. C'est aussi simple que ça ;-)

Donc si tu mets ton motif semi-transparent sur un body de fond bleu, tu
verra ce que tu voulais au départ («effet de transparence entre une
texture et une couleur»).

Ensuite tu t'arranges comme tu veux pour mettre ton motif localement ou
sur toute la page, là c'est toi le seul maître ;-)

Xavier

Merci Xavier pour ces précisions.

Pierre

La nouvelle vedette du Net, Xavier Robin, nous a dit :

Sinon pour quelque chose de plus modulaire, pour mettre différentes
couleurs en fond selon les pages, tu diminues simplement l'opacité de
ton image et tu l'enregistre en PNG qui est le seul format à gérer la
transparence. Sur ta page tu n'as qu'à mettre deux blocs les uns sur les
autres, celui de derrière de la couleur que tu veux, et ta texture en
fond de celui de devant.
Attention, fonctionne avec tous les navigateurs sauf IE :-\

C'est quand même majeur...
on peut le déplorer, mais 80% des lecteurs en europe sont sous I.E. et
pas la bêta 7 qui gérera le PNG...
On peut -avec un bête truc comme XnView par exemple- diminuer
luminosité et contraste, l'enregistrer en jpg, et le mettre dans une
CSS du genre

#filigranne
{
background-image: url(../photos/filigranne.jpg);
background-repeat: no-repeat;
background-position: center;
width: XXX px;
height: XXX px;
z-index: -10;
}
ça me paraît plus propre ?

surgele a écrit :

La nouvelle vedette du Net, Xavier Robin, nous a dit :

Sinon pour quelque chose de plus modulaire, pour mettre différentes
couleurs en fond selon les pages, tu diminues simplement l'opacité de
ton image et tu l'enregistre en PNG qui est le seul format à gérer la
transparence. Sur ta page tu n'as qu'à mettre deux blocs les uns sur les
autres, celui de derrière de la couleur que tu veux, et ta texture en
fond de celui de devant.
Attention, fonctionne avec tous les navigateurs sauf IE :-\

C'est quand même majeur...
on peut le déplorer, mais 80% des lecteurs en europe sont sous I.E. et
pas la bêta 7 qui gérera le PNG...
On peut -avec un bête truc comme XnView par exemple- diminuer luminosité
et contraste, l'enregistrer en jpg, et le mettre dans une CSS du genre

#filigranne
{
background-image: url(../photos/filigranne.jpg);
background-repeat: no-repeat;
background-position: center;
width: XXX px;
height: XXX px;
z-index: -10;
}
ça me paraît plus propre ?


Merci, je vais essayer cela, mais avant, il faut que je me mette au CSS,

cela me semble indispensable.

Cordialement.

Pierre

tu l'enregistre en PNG qui est le seul
format à gérer la transparence.

??? Faux... Le format GIF gère la transparence. Mais il est vrai que le PNG
permet d'obtenir de la transparence graduelle.
--
@+
HD