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

Eu estou usando este CSS para a opacidade de fundo de um

:

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

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

Crie um png que seja maior que 1×1 pixel (graças a trinta pontos) e que corresponda à transparência do plano de fundo.

EDIT: para voltar para o suporte ao IE6 +, você pode especificar o pedaço de bkgd para o png, esta é uma cor que replaceá a verdadeira transparência alfa se não for suportado. Você pode consertá-lo com o gimp, por exemplo.

para simular o 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 */ 

Eu acredito que este é o melhor porque nesta página tem uma ferramenta para ajudar você a gerar plano de fundo transparente alfa:

http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css

 #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 faça isso 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á que você crie dinamicamente um arquivo png, da mesma forma que 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

Eu sei que pode não ser a solução perfeita para todos, mas vale a pena considerar, em alguns casos, uma vez que economiza muito tempo e funciona na perfeição. Espero que ajude alguém!

Há na maior parte todo o código RGBa do apoio do browser no CSS mas somente IE8 e abaixo do nível não apoiam o código css de RGBa. Pois isso aqui é solução. Para a solução, você deve seguir este código e é melhor seguir a sequência, caso contrário você não obterá a saída perfeita como desejar. Este código é usado por mim e é quase perfeito. faça um comentário se for 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ê precisaria 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 isso significa que qualquer coisa dentro do contêiner também será 0.3 opacidade. Assim, você terá que alterar seu HTML para ter outro contêiner, não dentro do transparente, que contenha seu conteúdo.

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

Estou atrasado para a festa, mas para quem mais encontra 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 colors sólidas, mas transparentes.

Para usar o background do rgba no IE, existe um fallback.

Temos que usar a propriedade de filtro. que usa o ARGB

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

isto é fallback para rgba(255, 255, 255, 0.2)

Mude #33ffffff acordo com o seu.

Como calcular ARGB para RGBA

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 que você tem que dar primeiro você tem que dar backgound como rgb porque o Internet Explorer 8 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 a 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) do RGBA, podemos usar ferramentas on-line:

  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/