Transparence et opacité des éléments avec le CSS

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