Opacidade de fundo de CSS com rgba não funciona no IE 8

Estou usando este CSS para opacidade de fundo de um <div>:

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

Está funcionando bem no Firefox, mas não no IE 8. Como faço para funcionar?

Crie um png que seja maior do que 1x1 pixel (obrigado thirtydot), e que corresponda à transparência do seu fundo.

EDITAR: para voltar ao suporte do IE6 +, você pode especificar o pedaço bkgd para o png, esta é uma cor que substituirá a verdadeira transparência alfa se não for suportada. Você pode consertar isso com o gimp, por exemplo.

para simular fundo RGBA e HSLA no IE, você pode usar um filtro de gradiente, com a mesma cor inicial e final (canal alfa é o primeiro par no valor de HEX)

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Acredito que este seja o melhor porque nesta página há uma ferramenta para ajudá-lo a gerar um fundo alfa-transparente:

" Cross browser alpha transparent background CSS (rgba) " ^{_{(* agora vinculado a 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;
}

a imagem png transparente não funcionará no IE 6, as alternativas são:

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

ou apenas com jQuery:

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});

Embora tarde, eu tive que usar isso hoje e encontrei um script php muito útil aqui que permitirá a você criar dinamicamente um arquivo png, muito parecido com a forma como o rgba funciona.

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

O script pode ser baixado aqui: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Sei que pode não ser a solução perfeita para todos, mas vale a pena considerar em alguns casos, pois economiza muito tempo e funciona perfeitamente. Espero que ajude alguém!

Quase todos os navegadores suportam código RGBa em CSS, mas apenas o IE8 e o nível inferior não oferecem suporte a código CSS RGBa. Para esta aqui está a solução. Para a solução, você deve seguir este código e é melhor seguir sua sequência, caso contrário, você não obterá a saída perfeita como deseja. Este código é usado por mim e é quase sempre perfeito. faça um comentário se estiver perfeito.

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

Você usa css para alterar a opacidade. Para lidar com o IE, você precisa de algo como:

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

Mas o único problema com isso é que significa que qualquer coisa dentro do contêiner também terá 0,3 opacidade. Assim, você terá que mudar seu HTML para ter outro container, não dentro do transparente, que contém seu conteúdo.

Caso contrário, a técnica de png funcionaria. Exceto que você precisa de uma correção para o IE6, que por si só pode causar problemas.

Estou atrasado para a festa, mas para quem achar isso - este artigo é muito útil: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Ele usa o filtro de gradiente para exibir cores sólidas, mas transparentes.

Para usar o rgbaplano de fundo no IE, há um fallback.

Temos que usar a propriedade do filtro. que usaARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

este é um substituto para rgba(255, 255, 255, 0.2)

Mude de #33ffffffacordo com o seu.

Como calcular ARGBparaRGBA

isso funcionou para eu resolver o problema no IE8:

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

Felicidades

Esta solução realmente funciona, experimente. Testado no IE8

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

É muito simples você ter que fornecer primeiro você tem que fornecer o fundo como rgb porque o Internet Explorer 8 irá suportar rgb em vez de rgba e então você tem que dar opacidade como filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

Esta é uma solução de transparência para a maioria dos navegadores, incluindo o 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;
}

A melhor solução que encontrei até agora é a proposta por David J Marland em seu blog , para suportar opacidade em navegadores antigos (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;
}

Depois de pesquisar muito, encontrei a seguinte solução que está funcionando nos meus casos:

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

* Importante: Para calcular ARGB (para IEs) de RGBA, podemos usar ferramentas online:

1. https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/