开发者

CSS gray text opacity and Firefox color issue

I'm using following jQuery function to change the opacity of text (it's color: #999999)

$('.small_buttons').css('opacity', 0.3);

The effect looks good in Chrome or even Internet Explorer 8, but in current version of Firefox (3.6.10) this text gets really strange greenish colour, instead of nice pale gray.

Screenshots:

Chrome:

CSS gray text opacity and Firefox color issue

开发者_开发百科

Firefox:

CSS gray text opacity and Firefox color issue

Help appreciated!

Update: example: http://jsfiddle.net/YnDFr/1/


It appears it's because the element has no background, or specified as transparent. Try to add it the same background as its container.


fyi: I had the same issue with FF 3.6, found the following solution, which actually works on a variety of browsers excl. IE < 9.0;

just use the following syntax: color: rgba(r,g,b,opacity);

i.e: color: rgba( 153, 153, 153, .5) ;

this results in color: #999999; and opacity: .5; no need to apply background-color if you're text is on a transparent DIV. Most modern browsers, even IE 9.0 have support for the RGBA() color definition

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜