TRANSPARENT OU TRANSLUCIDE

Transparent : au travers duquel on peut voir    Translucide : qui laisse passer la lumière

Sur mon blog : le container [conteneur] (largeur 900px) est transparent. Le content [contenu] (largeur 600 px) est translucide. Ici essentiellement la partie des messages.

Pour avoir un élément transparent : feuille de style>background-color:transparent; si le container est transparent et le content ne l'est pas on ne verra toujours pas le fond d'écran. Pour que l'on puisse apercevoir le fond d'écran à travers vos messages, il faut aussi le content transparent => feuille de style>background-color:transparent; Bon, so far...so good.

Mais me direz vous, car vous êtes taquin et vous avez tout compris, le fond de vos message n'est pas transparent, il est translucide!!! Exact Sir. En fait, je n'ai pas un background-color:transparent mais un background-image avec une image translucide. Une image translucide ???? Allez!!!. Et comment on fait ????
Soit vous avez un logiciel qui fait ça. Soit vous la faites vous même.

Dans votre logiciel (j'utilise photofiltre) vous créez une image de 4 pixels (2x2) (mon Dieu que c'est petit, faut pas avoir une grosse souris)et vous mettez un pixel sur deux en couleur (comme un damier), les 2 autres pixels vous les rendez transparents. Vous en faites un GIF. C'est ce GIF que vous utilisez image de fond de l'élément, il va se cloner automatiquement (ça on l'a déjà vu, vous savez les nénuphars dans la piscine) pour couvrir tout le content.  >feuille de style>content [si vous avez beaucoup de messages, ce n'est pas une bonne idée]*
background-image:url(http://votre_blog.canalblog.com/docs/votre_pix.gif);
Bon c'est peut être pas utile, mais c'est joli, non? Enfin je crois.

*PS: à utiliser sur une petite surface. Il semblerait que IE soit extrèmement ralenti par ce procédé. A suivre...

Comments

[cocolapin]

merci pour ton "graaave ce blog !" il est vraiment trop pas ! lol

[Wilfred Sandmado]

Je te remercie de tous tes conseils et leçons. Je redémarre sur l'ordi après une désintoxication à l'addiction informatique (lol)et,est complètement loupé toutes ces nouveautés sémantiques. Bien qu'ayant démarré l'informatique avec le DOS 1.0, j'ai lâché la programmation avec l'introduction du langage objet. Je suis en train d'apprendre le XHTML et le CSS pour passer en mode avancé. Je reviendrai te voir pour des conseils. Merci, à bientôt

[twiggy]

j'ai déjà mis le fond en page d'aceuil et je l'ai encore mis en feuille de style d'après ce que tu vien d'éxpliquer sur cet article mais tjrs pas de fond sur les pages suivantes, seulement en page d'acceuil ke faire?

[l'alchimiste]

Je n'ai pas saisi le but de la manipulation avec la multiplication en .gif ...

Une image en fond avec la balise background-image dans la partie body de la feuille de style suffit ...
Ensuite il faut juste enlever les couleurs de fond des blocs avec "transparent" comme valeur,j'avais mis "none" ça marchait très bien aussi (pas de valeur, donc pas de couleur).

Le problème est que mon image de fond rendait difficile la lecture, alors j'ai laissé de la couleur, mais translucide, en réduisant l'opacité avec une balise
filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90;
Placé aussi dans le body.
Par contre les images héritent de l'opacité, et ça je n'ai toujours pas encore trouvé de solution.

Vuala vuala ... :)

[Bidouillette]

Je suis super contente, je suis parvenue grâce à tes explications à changer le fond (non à le rendre translucide) du corps de mon blog. Bon, in fine, cela ne me plaisait pas, j'y suis retournée. Normal, on ne lisait plus correctement, lol.
Alors, qu'une mémé de 52 piges ait compris, c'est que l'explication est bonne! Merciiiiii