Eis uma dica muito legal para quem tinha o velho problema de definir uma transparência em uma DIV e o restante do conteúdo sofrer com a mesma propriedade, ou seja, ao invés de apenas o background ficar transparente todo o conteúdo como textos e imagens ficavam também! A nightmare am!? :/
Esse código é bem interessante para quem não deseja utilizar imagens para realizar o efeito de transparência em Div, Box, Tabelas, etc…
Vamos fazer o seguinte, para o CSS incluímos o seguinte código:

#conteudo { Width: 500px; height: 300px; /* aqui é só para definir uma forma para termos noção */
/* aqui entra as propriedades da transparência, aqui eu usei a cor Black */
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0.7);
/* Para navegadores IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000);
/* Para navegadores IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000)";
}

Para finalizar em seu HTML basta criar uma DIV com a ID “conteúdo”: (pode renomear, mas não esqueça do CSS também)
< div id="conteudo">Dá para ver que o texto não fica transparente de acordo com o Background da DIV, legal não é?< /div>
Pronto! Basta testar.
Testado em:
Firefox 3.0 – 7.0
Chrome 15.0.8
Internet Explorer 7 e 8
IE9 não houve resultados satisfatórios. Em breve publicarei a solução.

background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000)";

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *