Si vous êtes toujours inquiet de l'incomplétude du texte transparent de l'arrière-plan, je vous suggère de jeter un œil. Bien sûr, j'ai abandonné IE6, alors ne dites pas qu'aucune image PNG8 n'est pas efficace sous IE6, bien sûr, vous pouvez également utiliser des filtres. Je ne recommande pas d'utiliser des filtres. Parce que cela peut avoir d'autres problèmes! (Si vous ne pouvez pas cliquer et attendre, etc.) Le plus peur de l'avant est le bug, en particulier IE6. Déterminer IE6!
Le cœur de cet article est d'utiliser des images transparentes PNG32 pour faire l'arrière-plan, puis de poser des arrière-plans. De cette façon, il n'y aura pas de texte transparent en arrière-plan. C'est super simple pour le faire!
L'image n'a besoin que d'ajuster la transparence.
Économisez simplement la transparence de l'image à 20% dans PSD en PNG.
(Ne définissez pas le mode sur gris. Cela deviendra png8. Et il n'y a pas de transparence.)
L'arrière-plan est transparent et le texte est opaque. Ha ha. IE 6 sort! Prise en charge: IE7.0 + / FF3.0 + / Opera10 + / Chrome / Safari. Les deux tests passaient.
La carte d'effet est la suivante:
Le code complet est le suivant:
Copier le code du code comme suit:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" /> />
<Title> IE7 + Background Transparent, Text Opaque et Super Simple Method </Title>
<Style>
p {marge: 0;
.bg {largeur: 280px;
.bg1 {Background: # 000;
.bg2 {fond: # f60;}
.com {Background: URL (http: //images/css_bg.png) 0 0;
</ style>
</ head>
<body>
<div>
<v> <p> L'arrière-plan est transparent et le texte est opaque. Ha ha. IE 6 Get Oks <br/> Prise en charge: <br />ie7.0+/ff3.0+/opera10+/chrome/safari <br /> Tous les passes de test. La transparence est: 20% </p> </div>
</div>
<div>
<v> <p> L'arrière-plan est transparent et le texte est opaque. Ha ha. IE 6 Get Oks <br/> Prise en charge: <br />ie7.0+/ff3.0+/opera10+/chrome/safari <br /> Tous les passes de test. La transparence est: 20% </p> </div>
</div>
</docy>
</html>