Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

18 juin 2008 3 18 /06 /juin /2008 16:33

Si vous souhaitez faire un effet de transparence sur votre blog, ne cherchez plus, tout est là !
Il y a deux solutions possibles.
La plus simple mais la moins esthétique, consiste à placer un gif transparent ou un png transparent en superposition sur le background (l’image de fond) général.

Vous pouvez télécharger une image avec 50% de transparence si vous en avez besoin
     gif blanc    png blanc           gif bleu     png bleu          gif jaune    png jaune          gif rouge    png rouge        
 
gif noir     
png noir          gif vert     png vert


Ensuite il suffit d’insérer le code dans l’élément voulu.
La syntaxe à employer :
sélecteur {background-image: url(http://www.monimage.png);}


Exemple :
Je veux placer une image à 50% transparent sous mes articles (ce qui laissera apparaître le backround général en transparence). 

.article {background-image: url(http://idata.over-blog.com/1/46/60/50/opacity/blanc.png); background-repeat:repeat;}

ou :

.article {background-image: url(http://idata.over-blog.com/1/46/60/50/opacity/blanc.gif); background-repeat:repeat;}

Remarques : la transparence des png est plus esthétique qu’un gif. Mais la transparence des png n’est affichée qu’avec internet 7 et les suivants, ou avec les autres navigateurs (Mozilla…)


La deuxième solution est un peu plus compliquée, mais est plus esthétique.
Il suffit d’indiquer dans le css le bon code qui permettra d’afficher l'opacité à une couleur d’arrière plan (ou à un élément).
Mais attention, tous les navigateurs (encore) ne le prenne pas en compte.
 



La syntaxe à employer :
sélecteur {background-color: couleur désirée; filter:alpha(opacity=x); -moz-opacity:0.x; opacity: 0.x;}

Explications :
Il suffit d’indiquer la couleur désirée avec le code haxadécimal (ne pas oublier le #).
filter:alpha(opacity=x) il suffit d’indiquer à la place du x le pourcentage désiré d’opacité (sans le %) pour 50% il faut écrire 50. Ce code fonctionne avec Internet Explorer 6 et suivants.
-moz-opacity:0.x il suffit d’indiquer la valeur décimale désirée. Pour 50% il faut écrire 0,5. Ce code fonctionne avec Mozilla 1,6 et antérieur.
opacity:0.x comme pour le code précédent, il suffit d’indiquer la valeur décimale désirée. Pour 50% il faut écrire 0,5. Ce code fonctionne avec le CSS3 et Mozilla supérieur à 1,6.


Exemple :
Je veux mettre un fond blanc visible à 50% par transparence en fond des modules.

.box {background-color: #FFFFFF; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}



Vous pouvez trouver quelques détails supplémentaires sur l'article Transparence et opacité du background

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

BeyonceMB 30/12/2009 12:16


waw franchement c'est super je c pas mais je comprend tout en un clein doeuil tink uuuuuuuuuu alors la je vais faire pr la prochaine version biz


♫♪ღ ღ ღ ♥ nessa ♥ღ ღ ღ♪♫ 15/09/2009 23:24

bonsoir je viens de lire ta réponse et je testerais demain...je ne comprends pas ta phrase "Mais attention, ton texte laissé en commentaire sera lui aussi en transparence" si je le mets en couleur sombre sur fond clair ça ira non ? merci en tout cas :-)

Christelle Vinsonneau 16/09/2009 14:06


si tu le mets en foncé sur clair, il sera visible.
Mais il sera transparent... donc si tu le mets en noir, il ne sera pas vraiment noir mais plutôt gris.


ღ ღ ღ ♥ nessa ♥ღ ღ ღ 15/09/2009 10:40

du coup pour l'instant j'ai pris un fond sur le blog "design" ici http://design.over-blog.fr/ mais c'est sombre ...pas terrible ....

ღ ღ ღ ♥ nessa ♥ღ ღ ღ 15/09/2009 09:55

bonjour j'ai fait les 3 manips aucune ne marchent , je reste avec un fond blanc dans ma zone commentaire; je ne comprends pas ce qui cloche ? pouvez vous m'aidez? merci d'avance
lien direct vers une page d'article ou de commentaire: http://mademoiselle-biotupp.over-blog.com/article-36066328-6.html#comment47851450

Christelle Vinsonneau 15/09/2009 10:37


Tu dois faire une syntaxe de ce style :
.commentMessage {background-color: #FFFFFF; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}
Mais attention, ton texte laissé en commentaire sera lui aussi en transparence. Il n'y a qu'une seule cellule pour cette zone.
Si ça ne marche pas : vérifie les ; et les } un seul caractère en plus ou en moins peut faire en sorte que l'ordre ne soit pas interprété par le navigateur.
Si ça ne marche toujours pas : vérifie que tu n'aies pas deux fois (ou plus) .commentMessage avec un contre-ordre (du genre un background). C'est toujours le dernier ordre qui est pris en
compte.


Michèle 05/05/2009 16:28

Génial, vraiment bravo, tu as le site le plus complet et pédagogique sur le CSS. J'ai enfin trouvé ce que je cherchai.
Maintenant, il ne me reste plus qu'à mettre en pratique
Merci

Christelle Vinsonneau 07/05/2009 21:38


Merci, c'est très gentil à toi de prendre le temps de m'écrire ce message.