Nao propagar a opacidade aos elementos filhos

Após um longo tempo, aqui estou eu.

Você provavelmente já fez uso da propriedade de opacidade (filter, opacity, -moz-opacity), portanto sabe que todos os elementos filhos do qual você adicionou opacity, herdam o valor dessa propriedade, pois bem outro dia estava desenvolvendo e não queria que o valor da opacidade fosse herdado para os seus filhos, fui ao oráculo (leia-se: google), para tentar resolver esse problema pelo css, pesquisei um pouco e nada encontrei, pelo que pesquisei não é possível impedir essa hereditariedade. Como não tinha muito tempo fiz um script para resolver o problema, é o script que está logo abaixo, porém se você sabe uma forma de impedir essa hereditariedade a dica será muito bem-vinda, pois o código foi a maneira mais prática que encontrei.

Código:

function fundoTransparente ( node, trans, props ){
/**
* Criado por Ramon
* www.coisasdeweb.blogspot.com
**/
node = ( typeof(node) == "string" ) ? document.getElementById( node ) : node; //Se veio apenas o id, pegarei o nó
var newNode = node.cloneNode(false); //Macaco de imitação
var opacity = node.style.opacity; //Grau de opacidade
opacity = opacity || node.style.MozOpacity || 1; //Grau de opacidade
trans = trans || opacity*100; //Transparência que eu quero
with (newNode.style) { //Configurando o nó
filter = "alpha(opacity=" + trans + ")";
MozOpacity = trans / 100;
opacity = trans / 100;
position = "absolute";
top = 0 + "px";
left = 0 + "px";
}

newNode.id += "bg"; //Modifico o id do clonado, para id + bg

node.appendChild( newNode ); //Vamos pra árvore DOM.
node.style.opacity = 1;
node.style.MozOpacity = 1;
node.style.background = "none";

if ( typeof(props) == "undefined" ) return;

for (var i in props){
node.style[ props[i] ] = "none"; //Propriedades recebem o valor none
}
}


A função é bem simples, recebe 3 parâmetros:

• Nó ou id, vc escolhe.


• Transparência que você quer (escala de 0 à 100). Opcional


• Propriedades (tipo array) que receberão valor none, para o elemento que têm o alpha possa dar o efeito esperado. Por padrão, o background recebe none (para dar o efeito de opacidade).

Para utiliza-lá, basta fazer a chamada dessa forma:


fundoTransparente("fundo", 40); //Id

//Ou

fundoTransparente(document.getElementById('fundo'), 40); //Elemento


O segundo parâmetro referente ao grau de opacidade, funciona da seguinte forma:

• Se você não passá-lo, a função vai procurar no css do elemento se a propriedade opacity possui algum valor, se possuir esse vai ser o grau de opacidade ( se estiver usando o FF, a função também consegue pegar o valor de –moz-opacity)



• Se passar o parâmetro, é o valor que prevalecerá sobre os demais.

Espero que gostem, pois para mim está sendo bem útil essa função, agora com uma linha no javascript, não tenho mais problemas de opacidade ser herdada.

Fuiii...