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


110

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?

Respostas:


73

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.


2
Sim. rgba()valores de cor não são suportados no IE 8.
Paul D. Waite,

11
Para evitar um possível problema, use qualquer tamanho diferente de 1x1: stackoverflow.com/questions/7764751/…
thirtydot

43
Seria aceitável em 2003, mas não em 2013. Use -ms-filter para um suporte simulado no IE antigo ou, melhor ainda, simplesmente ignore-o. Pessoas que usam o Internet Explorer 8 - merecem ser punidas por não ver raio de fronteira, fundo transparente etc.
Evgeny

21
@EugeneXa Eu trabalho para meus clientes, não o contrário. Se eles usarem o IE8, eu o apoio. Punir clientes em potencial não é um bom negócio.
Eli

14
@EugeneXa Está perto de 10% em meus sites, e geralmente eles são bons clientes. Não há uma única resposta certa aqui. Faça as contas e descubra o que funciona para você. Mesmo 6% podem ser enormes para alguns sites! Nenhum usuário merece ser punido. Acho que você vai se arrepender dessa atitude.
Eli

241

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

2
isso funciona muito bem, exceto, infelizmente, parece parar de funcionar se o elemento é dinamicamente escondido e re-mostrado usando jQuery ...
jackocnr

O filtro rgba IE foi muito útil e consegui contornar o problema para> ie7
codingbbq

Qual é a opacidade de 0,6 para o filtro?
Si8

10
Os códigos hexadecimais para transparência (o primeiro par) podem ser encontrados aqui: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295

2
Existe uma calculadora para os valores hexadecimais personalizados do IE!
nietonfir

14

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

E lembre-se sempre de usar a cor hexadecimal RGBA no filtro: eq # 004F80 é # ed004F80
user956584

9

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

24
Alfa de fundo não é o mesmo que opacidade (não torna o elemento filho transparente também).
Alexey Smolyakov

1
Isso não está respondendo à pergunta e nem o CSS aplicado por meio do jQuery (ou JavaScript em geral) é uma solução para vários navegadores.
mystrdat

7

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!


2
Como isso funciona - a URL rgba.php é solicitada apenas por navegadores incompatíveis rgba? Ou sempre é solicitado por todos os usuários e simplesmente não é mostrado?
Darren Cook

Minha esperança é que o navegador veja automaticamente o segundo plano de fundo e ignore o primeiro, antes de tentar fazer uma solicitação. Mas, isso é uma suposição educada no máximo.
Swivel

7

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

5

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.


4
haha caso típico de um navegador não agindo como o resto, e cada versão desse navegador não agindo como outras versões do mesmo navegador ... apenas a Microsoft poderia conseguir isso com tanto sucesso ...
ClarkeyBoy

3
@Paul D. Waite: Existem muitos, muitos recursos que os navegadores oferecem além de como eles processam o conteúdo. Desviar das especificações não é (ou não deveria ser) um recurso.
Bobby Jack de

@Paul D. Waite: Ok, entendo o que você quer dizer, mas o que quero dizer é que versões diferentes do IE agem de forma tão diferente que tenho que criar uma folha de estilo diferente para cada versão ... Tenho folhas de estilo diferentes para o IE6, 7 e 8 ... ainda só tenho uma folha de estilo para todos os FF / Chrome / Opera / Safari. @Bobby Jack: Destacado ...
ClarkeyBoy

@Bobby: Claro, mas o IE 8 não se desvia mais dos padrões do que o IE 7 ou o IE 6, certo?
Paul D. Waite de

@ClarkeyBoy: claro. Eu acho que minha folha de estilo do IE 8 é muito mais simples do que minha folha de estilo do IE 6. O IE é o mais estranho dos navegadores, mas está se alinhando lentamente com os outros. O Firefox não era compatível rgba()até a versão 3 e o Opera não era compatível até a versão 10.
Paul D. Waite,


2

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


Estou procurando aquele conversor de ARGB para RGBA desde sempre, obrigado! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin

1

isso funcionou para eu resolver o problema no IE8:

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

Felicidades


1

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

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

0

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

0

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

0

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

0

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/
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.