开发者

Firefox text opacity background issue

Take a look at this screenshot from Firefox:

Firefox text opacity background issue

The two left and right arrows are translucent text, at 20% and 80% opacity. The text has a text-shadow style applied. The images behind them also have varying opacities applied.

Other browsers are working fine - even IE6, in its own pathetic minimal way - but Firefox is drawing a strange black box behind the text. It's not filling the full text area, just the cl开发者_开发问答ip of the actual characters.

I know firefox is capable of doing transparency, so any idea what's triggering this strange behaviour?


Update: here's a simple JSFiddle showing the effect. Remove the opacity rule and the problem goes away.

I'm using Firefox 3.6.9 on Linux. The page uses jQuery and jQuery Tools for various opacity fading things, but as the fiddle above shows that isn't causing the issue.


Instead of opacity have you tried background-color:rgba() ? You can control the opacity of the background color alone. You will still need to use opacity for IE


For opacity issues:

http://davidwalsh.name/css-opacity

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

Or perhaps better:

.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;}

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜