Opacidade do fundo do div sem afetar o elemento contido no IE 8?

Eu quero definir a opacidade do fundo do div sem afetar o elemento contido no IE 8. Tenho uma solução qualquer e não responda para definir a imagem 1 X 1 .png e definir a opacidade dessa imagem porque estou usando opacidade dinâmica e o administrador de cores pode mudar aquele

Eu usei isso, mas não estou funcionando no IE 8

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

e

rgba(0,0,0,0.3)

Além disso.

O opacityestilo afeta todo o elemento e tudo dentro dele. A resposta correta para isso é usar uma cor de fundo rgba.

O CSS é bastante simples:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... onde os três primeiros números são os valores de vermelho, verde e azul para sua cor de fundo, e o quarto é o valor do canal 'alfa', que funciona da mesma maneira que o opacityvalor.

Veja esta página para mais informações: http://css-tricks.com/rgba-browser-support/

A desvantagem é que isso não funciona no IE8 ou inferior. A página que vinculei acima também lista alguns outros navegadores nos quais não funciona, mas agora eles são todos muito antigos; todos os navegadores em uso atualmente, exceto IE6 / 7/8, funcionarão com cores rgba.

A boa notícia é que você também pode forçar o IE a funcionar com isso, usando um hack chamado CSS3Pie . CSS3Pie adiciona uma série de recursos CSS3 modernos a versões anteriores do IE, incluindo cores de fundo rgba.

Para usar CSS3Pie para fundos, você precisa adicionar uma -pie-backgrounddeclaração específica ao seu CSS, bem como o behaviorestilo PIE , para que sua folha de estilo fique assim:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

Espero que ajude.

[EDITAR]

Pelo que vale a pena, como outros já mencionaram, você pode usar o filterestilo do IE , com a gradientpalavra - chave. A solução CSS3Pie realmente usa essa mesma técnica nos bastidores, mas elimina a necessidade de você mexer diretamente com os filtros do IE, para que suas folhas de estilo sejam muito mais limpas. (ele também adiciona um monte de outros recursos interessantes, mas isso não é relevante para esta discussão)

é simples só você tem que dar

background: rgba(0,0,0,0.3)

& para o IE use este filtro

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

você pode gerar seu filtro rgba aqui http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity no elemento pai define-o para toda a árvore sub DOM

Você realmente não pode definir a opacidade para um determinado elemento que também não cairia em cascata para os descendentes. Não é assim que CSS opacityfunciona, infelizmente.

O que você pode fazer é ter dois elementos irmãos em um contêiner e definir o posicionamento transparente:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

então você tem que definir transparente position: absolute/relativepara que seu irmão de conteúdo seja renderizado sobre ele.

rgba pode fazer transparência de fundo de fundos coloridos

rgbaa configuração da cor no elemento background-colorfuncionará, é claro, mas o limitará a usar apenas a cor como plano de fundo. Sem imagens, tenho medo. Você pode, é claro, usar gradientes CSS3 se fornecer cores de interrupção de gradiente em rgba. Isso também funciona.

Mas esteja ciente de que rgbapode não ser compatível com os navegadores necessários.

Funcionalidade de diálogo modal sem alertas

Mas se você deseja mascarar a página inteira, isso geralmente é feito adicionando um separado divcom este conjunto de estilos:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

Então, quando você exibir o conteúdo, ele deve ter um superior z-index. Mas esses dois elementos não estão relacionados em termos de irmãos ou qualquer coisa. Eles são exibidos como deveriam ser. Um sobre o outro.

Tente definir o índice z mais alto no elemento contido.

E quanto a esta abordagem:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

Talvez haja uma resposta mais simples, tente adicionar qualquer cor de fundo de sua preferência ao código, como background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Isso afeta todos os divs filhos quando você usa o recurso de opacidade com posições diferentes de absolutas. Outra maneira de conseguir isso é não colocar divs dentro de cada um e usar a posição absoluta para os divs. Não use nenhuma cor de fundo para o div superior.

Use RGBA ou se você usar o código hexadecimal, altere-o para rgba. Não há necessidade de fazer alguns css de elemento presodu .

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

OU

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;