CSS background opacity with rgba not working in IE 8

Question

I am using this CSS for background opacity of a <div>:

background: rgba(255, 255, 255, 0.3);

It’s working fine in Firefox, but not in IE 8. How do I make it work?

diablero13 · Answer 1 · 2021-06-16T04:46:27.340

240

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 */

edited Jun 16 '21 at 04:46

answered Oct 20 '10 at 11:25

diablero13

2,520
2
13
5

2

this works a treat, except unfortunately it seems to stop working if the element is dynamically hidden and re-shown using jQuery... – jackocnr May 26 '11 at 19:15
rgba IE filter was very useful and I was able get work around for >ie7 – codingbbq Aug 29 '13 at 10:32
What is the opacity of 0.6 for the filter? – Si8 Feb 05 '14 at 14:46
11

Hex codes for transparency (the first pair) can be found here: (http://stackoverflow.com/questions/15852122/hex-transparency-in-colors) – user1794295 Mar 06 '14 at 15:32
3

There is a [calculator](http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/) for those IE custom hex values! – nietonfir Jan 30 '15 at 11:26
@Si8 in hex notation opacity of 0.6 is 99 (as example white color with 0.6 of opacity will be #99ffffff) – diablero13 Jun 16 '21 at 04:44

score 71 · Accepted Answer · edited Nov 06 '12 at 16:25

71

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.

edited Nov 06 '12 at 16:25

Daniel Mendel

9,862
1
24
37

answered Oct 20 '10 at 07:44

MatTheCat

18,071
6
54
69

2

Yup. `rgba()` colour values aren’t supported in IE 8. – Paul D. Waite Oct 20 '10 at 08:44
1

The other suggestions are valid, but this has by far the least side effects. – Jon Hadley Sep 01 '11 at 16:03
11

To avoid a potential problem, use any size other than `1x1`: http://stackoverflow.com/questions/7764751/ie8-shows-gradient-instead-of-background-image/7765128#7765128 – thirtydot Jan 23 '12 at 16:18
44

Would be acceptable in 2003, but not in 2013. Either use -ms-filter for somewhat simulated support in old IE, or, better yet, just ignore it. People using IE8- deserve to be punished by not seeing border radius, transparent background etc. – Evgeny Jul 10 '13 at 20:16
1

If you'd rather punish IE8 users, you might have to implement an advertisement in your site that says "Improve your experience with a modern browser"? That's what Google is doing with Gmail anyway. – Isaac Llopis Jul 26 '13 at 14:25
22

@EugeneXa I work for my customers, not the other way around. If they use IE8, then I support it. Punishing potential customers is not good business. – Eli Mar 04 '14 at 16:34
14

@EugeneXa It's closer to 10% on my sites, and they're often good customers. There is no single right answer here. Do the math and figure out what works for you. Even 6% could be huge for some sites! No users deserve to be punished. I think you will regret that attitude. – Eli Mar 21 '14 at 20:37
2

I think we can all agree on the fact that IE8 only deserves graceful degradation ;) – Ben Sewards Feb 11 '15 at 15:39
1

support for IE8 not really avoidable in enterprisey-environments (often a requirement). – cowbert May 31 '15 at 22:28
When Microsoft drops support for it, and Microsofts sites no long render in Ie8, it's time to drop support. This is the argument I'm trying to have with my boss right now. – Throttlehead Oct 12 '15 at 20:28
1

@eli still supporting IE8 in 2018? :) – hopsinat Sep 17 '18 at 08:13

score 17 · Answer 3 · edited Nov 02 '19 at 03:00

17

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

edited Nov 02 '19 at 03:00

ashleedawg

20,365
9
72
105

answered Jan 06 '14 at 08:19

ahgood

1,847
20
19

And remeber always use RGBA hex color in filter: eq #004F80 is #ed004F80 – user956584 Jul 20 '14 at 21:08

score 9 · Answer 4 · answered Oct 20 '10 at 09:13

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');
});

Background alpha is not the same as opacity (it's not make child element transparent too). — Alexey Smolyakov, Apr 19 '12 at 14:25
This is neither answering the question nor is CSS applied through jQuery (or JavaScript in general) a crossbrowser solution. — zrooda, Sep 05 '12 at 15:41

score 7 · Answer 5 · answered Mar 19 '13 at 16:48

7

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&g=100&b=0&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!

answered Mar 19 '13 at 16:48

Camilo Delvasto

79
1
3

2

How does this work - is the rgba.php URL only requested by browsers that don't support `rgba`? Or does it always get requested by all users, and simply not shown? – Darren Cook Oct 29 '13 at 02:56
My hopes are that the browser will automatically see the second background and ignore the first, before it attempts to make a request. But, that's an educated guess at most. – Swivel Nov 04 '13 at 18:31

score 7 · Answer 6 · edited Jan 23 '15 at 15:29

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

score 5 · Answer 7 · answered Oct 20 '10 at 08:19

5

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.

answered Oct 20 '10 at 08:19

Coin_op

10,568
4
35
46

4

haha typical case of one browser not acting like the rest, and each version of that browser not acting like other versions of the **same** browser... only Microsoft could achieve this quite so successfully... – ClarkeyBoy Oct 20 '10 at 08:26
3

@Paul D. Waite: There are many, many features that browsers offer besides how they render content. Deviating from the spec isn't (or shouldn't be) a feature. – Bobby Jack Oct 20 '10 at 09:15
@Paul D. Waite: Ok I see your point, but what I mean is that different versions of IE act **so** different that I find myself having to create a different stylesheet for each version... I have different stylesheets for IE6, 7 and 8... yet I only have one stylesheet for all of FF/Chrome/Opera/Safari. @Bobby Jack: Seconded... – ClarkeyBoy Oct 20 '10 at 09:27
@Bobby: Sure, but IE 8 doesn’t deviate from the standards more than IE 7 or IE 6, surely? – Paul D. Waite Oct 20 '10 at 09:50
@ClarkeyBoy: sure. I find my IE 8 stylesheet is a heck of a lot simpler than my IE 6 stylesheet though. IE is the oddest of browsers, but it’s slowly aligning with the others. Firefox didn’t support `rgba()` until version 3, and Opera didn’t support it until version 10. – Paul D. Waite Oct 20 '10 at 09:51
ok I'll give them that they are slowly getting better. But surely if they had've stuck to the standards from the start then they would have saved both themselves and web developers a hell of a lot of time, resources and money... (not sure about resources - but certainly the other two...) – ClarkeyBoy Oct 20 '10 at 10:26
@ClarkeyBoy: But that assumes the standards were there at the start. Standards and implementations do a [delicate dance](http://lists.w3.org/Archives/Public/public-html/2010Jan/0107.html) (see also [Mark Pilgrim’s expansion on this point](http://diveintohtml5.org/past.html)). What’s easy for one browser to implement may not be easy for another. The CSS 3 color module first went to “last call” in 2002. Firefox didn’t implement `rgba()` for another 6 years after that, whereas Safari had it much earlier. The standards process is not Perfect Standard -> Perfect Implementations -> Everyone’s Haapy. – Paul D. Waite Oct 20 '10 at 10:39
(And just for clarity, the CSS 3 colour module was subsequently pulled back from “last call” when the definition of “last call” changed, and only returned to it in mid-2008.) – Paul D. Waite Oct 20 '10 at 10:40

Alex Harford · Answer 8 · 2013-01-15T00:14:05.763

4

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.

edited Jan 15 '13 at 00:14

answered Jan 14 '13 at 22:08

Alex Harford

110
7

Simlary: http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css – user956584 Jul 18 '14 at 16:50

score 2 · Answer 9 · edited Jun 20 '20 at 09:12

2

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`

edited Jun 20 '20 at 09:12

Community

1
1

answered May 21 '14 at 08:08

shyammakwana.me

5,562
2
29
50

Been looking for that ARGB to RGBA converter forever, Thanks! http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ – Justin Jul 31 '15 at 03:42

score 1 · Answer 10 · answered Jun 10 '13 at 17:57

1

this worked for me to solve the problem in IE8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

Cheers

answered Jun 10 '13 at 17:57

Guille

370
2
7
21

score 1 · Answer 11 · edited May 13 '15 at 08:02

1

This solution really works, try it. Tested in IE8

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

edited May 13 '15 at 08:02

Tom Brunberg

20,312
8
37
54

answered May 13 '15 at 07:43

Rohit

11
1

score 0 · Answer 12 · edited Apr 09 '14 at 05:45

0

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);

edited Apr 09 '14 at 05:45

Harikrishnan

9,688
11
84
127

answered Apr 09 '14 at 05:22

kartik singh

1

score 0 · Answer 13 · answered Jan 01 '15 at 13:15

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

score 0 · Answer 14 · answered Mar 03 '15 at 17:05

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

score 0 · Answer 15 · answered Aug 23 '16 at 19:35

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:

CSS background opacity with rgba not working in IE 8

15 Answers15

How to calculate `ARGB` for `RGBA`

Linked

Related

CSS background opacity with rgba not working in IE 8

15 Answers15

How to calculate ARGB for RGBA

Linked

Related

How to calculate `ARGB` for `RGBA`