Home/ Questions/Q 6047139
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:19:07+00:00

Example: http://jsfiddle.net/NBWmU/1/ I’m using the following CSS to make the background of my div

  • 0

Example: http://jsfiddle.net/NBWmU/1/

I’m using the following CSS to make the background of my div transparent in as many browsers as possible:

background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)";

For some reason in IE8 text on top of the transparent div appears sharp and pixelated, and looks quite different to the same text outside the div on a plain background. I haven’t tested in other browsers yet.

Does anyone know of a way I can force the text to render the same everywhere? I’ve tried using a transparent png but this caused some other rendering issues and I’m hoping there is another way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes: don’t use -ms-filter and filter:progid:DXImageTransform etc.

    There’s a bug in the implementation of the filters causing it to use the fallback text renderer. The only way to make it consistent is to either don’t use it when text is involved, or use it on all text (so that all text is equally ugly and pixelated).

    What I usually do is, i use only standard css for transparency such as rgba() colors, opacity etc. And in the IE-specific css I set the background/text color to an approximate match to how it would look whith real transparency.

    And for images I create an IE-specific copy of the image sprite that are transparent. But transparent png’s will cause the same problems in ie7 and older, so I usually fall back to full opacity (i.e. not transparent) in ie7.css

    • 0