CSS background opacity with rgba not working in IE 8

Question

I am using this CSS for background opacity of a  lt div gt    background  rgba 255  255  255  0 3     It   s working fine in Firefox  but not in IE 8  How do I make it work

User · Answer

to simulate RGBA and HSLA background in IE  you can use a gradient filter  with the same start and end color   alpha channel is the first pair in the value of HEX     background  rgba 255  255  255  0 3      browsers    filter  progid DXImageTransform Microsoft gradient GradientType 0 startColorstr   4cffffff   endColorstr   4cffffff       IE

User · Answer

You use css to change the opacity  To cope with IE you d need something like    opaque       opacity   0 3      -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 30        filter  alpha opacity 30       But the only problem with this is that it means anything inside the container will also be 0 3 opacity  Thus you ll have to change your HTML to have another container  not inside the transparent one  that holds your content   Otherwise the png technique  would work  Except you d need a fix for IE6  which in itself could cause problems

User · Answer

There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code  For This here is solution  For The solution you must follow this code and it   s better to go with it   s sequence otherwise you will not get perfect output as you wish  This code is used by me and it   s mostly perfect  make comment if it   s perfect    class               Web browsers that does not support RGBa            background  rgb 0  0  0              IE9 FF chrome safari supported            background  rgba 0  0  0  0 6              IE 8 suppoerted               Here some time problem for Hover than you can use background color image            -ms-filter   progid DXImageTransform Microsoft gradient startColorstr  88000000  endColorstr  88000000               Below IE7 supported            filter  progid DXImageTransform Microsoft gradient startColorstr  88000000  endColorstr  88000000

User · Answer

Create a png which is larger than 1x1 pixel  thanks thirtydot   and which matches the transparency of your background   EDIT   to fall back for IE6  support  you can specify bkgd chunk for the png  this is a color which will replace the true alpha transparency if it is not supported  You can fix it with gimp eg

User · Answer

Though late  I had to use that today and found a very useful php script here that will allow you to dynamically create a png file  much like the way rgba works   background  url rgba php r 255 amp g 100 amp b 0 amp a 50  repeat  background  rgba 255 100 0 0 5     The script can be downloaded here  http   lea verou me wp-content uploads 2009 02 rgba zip  I know it may not be the perfect solution for everybody  but it s worth considering in some cases  since it saves a lot of time and works flawlessly  Hope that helps somebody

User · Answer

After searching a lot  I found the following solution which is working in my cases    opacity 30      background rgb 255 255 255      Fallback for web browsers that don t support neither RGBa nor filter         background  transparent 9     Backslash 9 hack to prevent IE 8 from falling into the fallback        background rgba 255 255 255 0 3      RGBa declaration for modern browsers        -ms-filter progid DXImageTransform Microsoft gradient startColorstr  4CFFFFFF endColorstr  4CFFFFFF      IE 8 suppoerted  Sometimes Hover issues may occur  then we can use transparent repeating background image           filter progid DXImageTransform Microsoft gradient startColorstr  4CFFFFFF endColorstr  4CFFFFFF      needed for IE 6-7        zoom  1     Hack needed for IE 6-8          To avoid IE more recent versions to apply opacity twice  once with rgba and once with filter   we need the following CSS3 selector hack  not supported by IE 6-8      opacity 30 nth-child n        filter  none       Important  To calculate ARGB for IEs  from RGBA  we can use online tools    https   kilianvalkhof com 2010 css-xhtml how-to-use-rgba-in-ie  http   web archive org web 20131207234608 http   kilianvalkhof com 2010 css-xhtml how-to-use-rgba-in-ie

User · Answer

This a transparency solution for most browsers including IE x   transparent          Required for IE 5  6  7              or something to trigger hasLayout  like zoom  1         width  100            Theoretically for IE 8  amp  9  more valid                  but not required as filter works too           should come BEFORE filter        -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 50            This works in IE 8  amp  9 too               but also 5  6  7        filter  alpha opacity 50           Older than Firefox 0 9        -moz-opacity 0 5          Safari 1 x  pre WebKit          -khtml-opacity  0 5          Modern         Firefox 0 9   Safari 2   Chrome any         Opera 9   IE 9         opacity  0 5

User · Answer

I believe this is the best because on this page has a tool to help you generate alpha-transparent background    Cross browser alpha transparent background CSS  rgba     now linked to archive org    div       background rgb 255 0 0       background  transparent 9      background rgba 255 0 0 0 3       filter progid DXImageTransform Microsoft gradient startColorstr  4cFF0000 endColorstr  4cFF0000       zoom  1

User · Answer

The best solution I found so far is the one proposed by David J Marland in his blog  to support opacity in old browsers  IE 6      alpha30      background rgb 255 0 0      Fallback for web browsers that don t support RGBa nor filter         background  transparent 9     backslash 9 hack to prevent IE 8 from falling into the fallback        background rgba 255 0 0 0 3      RGBa declaration for browsers that support it        filter progid DXImageTransform Microsoft gradient startColorstr  4cFF0000 endColorstr  4cFF0000      needed for IE 6-8        zoom  1     needed for IE 6-8              CSS3 selector  not supported by IE 6 to IE 8      to avoid IE more recent versions to apply opacity twice     once with rgba and once with filter       alpha30 nth-child n        filter  none

User · Answer

This solution really works  try it  Tested in IE8   dash-overlay      -ms-filter   progid DXImageTransform Microsoft gradient startColorstr  4C000000 endColorstr  4C000000

User · Answer

this worked for me to solve the problem in IE8   -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 1      Cheers

User · Answer

I m late to the party  but for anyone else who finds this - this article is very useful  http   kilianvalkhof com 2010 css-xhtml how-to-use-rgba-in-ie   It uses the gradient filter to display solid but transparent colour

User · Answer

To use rgba background in IE there is a fallback  We have to use filter property  that uses ARGB     background none      -ms-filter progid DXImageTransform Microsoft gradient startColorstr  33ffffff endColorstr  33ffffff       filter progid DXImageTransform Microsoft gradient startColorstr  33ffffff endColorstr  33ffffff       zoom  1   this is fallback for  rgba 255  255  255  0 2  Change  33ffffff according to yours  How to calculate ARGB for RGBA

User · Answer

the transparent png image will not work in IE 6-  alternatives are   with CSS    transparent           works for IE 5          filter alpha opacity 30            works for IE 8         -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 30            works for old school versions of the Mozilla browsers like Netscape Navigator         -moz-opacity 0 3           This is for old versions of Safari  1 x  with KHTML rendering engine        -khtml-opacity  0 3           This is the  most important  one because it s the current standard in CSS  This will work in most versions of Firefox  Safari  and Opera           opacity  0 3       or just do it with jQuery      a crossbrowser solution   document  ready function             transparent   css  opacity    3

User · Answer

It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like filter alpha opacity 50    background rgb 0 0 0   filter alpha opacity 50

[css] CSS background opacity with rgba not working in IE 8

Examples related to css

Examples related to internet-explorer-8

Examples related to rgba