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

112

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.

Govind Malviya
fonte
Você não pode fazer isso. A propriedade opacity afeta todo o conteúdo do seu elemento (outros elementos html + texto). Mas eu não entendo porque você não quer usar png. Você só terá que mudar a imagem juntos para mudar o css (porque eu acho que você tem css diferentes que podem ser
trocados
@Corum: Como você está errado (tanto quanto eu). É possível. Confira esta postagem do blog. robertnyman.com/2010/01/11/… Incrivelmente inteligente.
Robert Koritnik,
Acabei de postar aqui: < stackoverflow.com/a/11755175/1491212 > Pode ajudar, espero!
Armel Larcier

Respostas:

236

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)

Spudley
fonte
1
brilhante! Isso me ajudou muito.
Jordan Starrk
22

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

sandeep
fonte
1
O que gradientes têm a ver com opacidade? : S
Robert Koritnik,
@Robert Koritnik: Veja minha versão desta resposta para uma explicação melhor - stackoverflow.com/questions/5160419/… também aqui: stackoverflow.com/questions/4788564/…
thirtydot
@robert, é um único filtro do IE que está disponível na web e tem o mesmo efeito que o rgba e eu não sou um especialista em filtros.
sandeep
@Robert simplesmente funciona;) veja este link - @sandeep Corrigi o código do filtro para adicionar os ingredientes necessários (fundo transparente e hasLayout), altere a ordem do filtro .. sinta-se à vontade para reverter se não concordar;)
clairesuzy
1
Filtros @sandeep não funcionam sem hasLayout, você pode ter outra propriedade hasLayout em seu código, largura talvez? Estou trabalhando com uma mão ... quebrei meu pulso, por isso minhas respostas lentas, mas aqui está jsfiddle com o código do IE relevante em um comentário condicional para comparação dos dois métodos
clairesuzy
8

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.

Robert Koritnik
fonte
esta é a resposta correta, trabalhando até mesmo com imagens bg
Botea Florin
2

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

maple_shaft
fonte
1

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>

Daniel
fonte
0

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);
}
Miguel Angel de la Marta
fonte
2
Também está afetando o conteúdo!
Germa Vinsmoke
0

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.

Armin Farah Al-Saada
fonte
0

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;
Gajender Singh
fonte