Se você ainda está preocupado com a incompletude do texto transparente do plano de fundo, sugiro que você dê uma olhada. Obviamente, eu desisti do IE6, então não diga que nenhuma foto do PNG8 não é eficaz no IE6, é claro que você também pode usar filtros. Eu não recomendo o uso de filtros. Porque isso pode ter outros problemas! (Se você não pode clicar e esperar, etc.) O maior medo do front -end é o bug, especialmente o IE6. ROLAM IE6!
O núcleo deste artigo é usar imagens transparentes png32 para criar o plano de fundo e depois colocar o fundo. Dessa forma, não haverá texto transparente em segundo plano. É super simples fazê -lo!
A imagem só precisa ajustar a transparência.
Basta salvar a transparência da imagem para 20%no PSD para PNG.
(Não defina o modo para cinza. Isso se tornará png8. E não há transparência.)
O fundo é transparente e o texto é opaco. Ha ha. Ou seja, 6 está saindo! Suporte: IE7.0+/FF3.0+/Opera10+/Chrome/Safari. Ambos os testes foram aprovados.
O mapa de efeitos é o seguinte:
O código completo é o seguinte:
Copie o código do código da seguinte forma:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<title> ie7+fundo transparente, text opaco e super simples método </title>
<Estilo>
p {margem: 0;
.bg {width: 280px;
.bg1 {background: #000;
.bg2 {background:#f60;}
.com {Background: URL (http: //images/css_bg.png) Repita 0 0;
</style>
</head>
<Body>
<div>
<div> <p> O fundo é transparente e o texto é opaco. Ha ha. Ou seja 6 Get OKS <br/> Suporte: <r />ie7.0+/ff3.0+/opera10+/chrome/safari <br /> Todos os passes de teste. A transparência é: 20%</p> </div>
</div>
<div>
<div> <p> O fundo é transparente e o texto é opaco. Ha ha. Ou seja 6 Get OKS <br/> Suporte: <r />ie7.0+/ff3.0+/opera10+/chrome/safari <br /> Todos os passes de teste. A transparência é: 20%</p> </div>
</div>
</body>
</html>