2010-10-25 11 views
1

Jetez un oeil à cette capture d'écran de Firefox:opacité Firefox texte question de fond

alt text

Les deux flèches gauche et droite sont translucides texte, à 20% et 80% d'opacité. Le texte a un style texte-ombre appliqué. Les images derrière eux ont également des opacités variables appliquées.

D'autres navigateurs fonctionnent bien - même IE6, à sa manière minimaliste pathétique - mais Firefox dessine une étrange boîte noire derrière le texte. Il ne remplit pas la zone de texte complète, juste le clip des caractères réels.

Je sais que firefox est capable de faire de la transparence, donc une idée de ce qui déclenche ce comportement étrange?


Mise à jour:here's a simple JSFiddle showing the effect. Supprimez la règle opacity et le problème disparaît. J'utilise Firefox 3.6.9 sous Linux. La page utilise jQuery et les outils jQuery pour différentes choses d'opacité, mais comme le montre le violon ci-dessus, cela ne cause pas le problème.

+2

Une chance de montrer un lien direct ou JSFiddle? –

+0

Voilà, mis à jour avec un violon. –

+0

Je ne vois pas de boîte noire dans le violon. Firefox 3.6.11 sous Linux ou 4.0b2 sous Windows. – bobince

Répondre

0

Pour les problèmes d'opacité:

http://davidwalsh.name/css-opacity

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

Ou peut-être mieux:

.show-50 { 
-moz-opacity: 0.5 !important; 
-webkit-opacity: 0.5!important; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 
filter: alpha(opacity=50) !important; 
opacity: 0.5 !important;} 

En savoir plus: http://www.robarspages.ca/web-development/css-opacity-for-all-browsers-cross-browser-compatible/#ixzz13MngpmvC

+0

Le problème n'est pas que l'opacité n'a pas d'effet: comme vous pouvez le voir sur l'image, ils sont vraiment effacés. Le problème est qu'il injecte un arrière-plan à l'intérieur de l'élément transparent. –

1

Au lieu d'opacité Avez-vous essayé background-color: rgba()? Vous pouvez contrôler l'opacité de la couleur d'arrière-plan seule. Vous aurez toujours besoin d'utiliser l'opacité pour IE

+0

Juste essayé ceci, et les arrière-plans de RGBA semblent être ignorés entièrement? –

+0

Êtes-vous sûr de l'utiliser correctement? background-color: rgba (0,0,0,0.75) == couleur de fond noire à .75 opacité –