Comment faire un fond semi-transparent ?

Question

J'ai besoin de rendre un fond blanc transparent à 50% sans que cela n'affecte quoi que ce soit d'autre. Comment dois-je m'y prendre ?

Answer 1

Utilisez rgba() :

.transparent {
  background-color: rgba(255,255,255,0.5);
}

Vous obtiendrez ainsi une opacité de 50 %, tandis que le contenu de la boîte continuera à avoir une opacité de 100 %.

Si vous utilisez opacity:0.5 le contenu sera estompé ainsi que l'arrière-plan. Ne l'utilisez donc pas.

Answer 2

Bon à savoir

Certains navigateurs web ont des difficultés à rendre le texte avec des ombres sur un fond transparent. Vous pouvez alors utiliser une image PNG 1x1 semi-transparente comme arrière-plan.

Note

N'oubliez pas que IE6 ne prend pas en charge les fichiers PNG.

Answer 3

NE PAS utiliser un PNG 1x1 semi transparent. Donnez au PNG une taille de 10x10, 100x100, etc. Tout ce qui a un sens pour votre page. (J'ai utilisé un PNG de 200x200 et il ne faisait que 0,25 kb, donc il n'y a pas de réel souci de taille de fichier ici).

Après avoir consulté cet article, j'ai créé ma page web avec 3 PNG de 1x1 avec une transparence variable.

Dreamweaver CS5 était en chute libre. J'avais des flashbacks vers DOS ! !! Apparemment, chaque fois que j'essayais de faire défiler, d'insérer du texte ou de faire quoi que ce soit, DW essayait de recharger les zones semi-transparentes 1x1 pixel à la fois ... YIKES !

L'assistance technique d'Adobe ne savait même pas quel était le problème, mais m'a dit de reconstruire le fichier (cela a fonctionné sur leurs systèmes, soit dit en passant). Ce n'est que lorsque j'ai chargé le premier PNG transparent dans le fichier css que la doc a replongé.

Puis j'ai trouvé un message sur un autre site d'aide à propos des PNG qui font planter Dreamweaver. Augmentez la taille de votre PNG ; il n'y a aucun inconvénient à le faire.

Answer 4

Background:rgba(255,255,255,0.5) ; est suffisant pour que le fond soit fait correctement.

Je l'ai appliqué au plugin jquery image slideshow. Cela fonctionne bien.

Answer 5

Essayez ça :

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}